/* Bebas Neue (titulares) e Inter (texto) se cargan como en el de cada página (con preconnect) en vez de @import, para evitar la cascada de peticiones que un @import provoca. */ /* Estilos propios mínimos. Tailwind se carga por CDN para mantener el proyecto simple y estático. */ :root { color-scheme: dark; --players-right: 0px; --players-size: min(118vw, 510px); --players-top: 86px; } * { box-sizing: border-box; } body { background: linear-gradient(110deg, rgba(253, 224, 71, 0.12), transparent 18%, transparent 76%, rgba(14, 165, 233, 0.1)), radial-gradient(ellipse 90% 55% at 8% 0%, rgba(245, 158, 11, 0.28), transparent 48%), radial-gradient(ellipse 70% 45% at 92% 5%, rgba(14, 165, 233, 0.18), transparent 42%), radial-gradient(ellipse 55% 65% at 50% 105%, rgba(15, 30, 80, 0.82), transparent 58%), radial-gradient(ellipse 35% 35% at 20% 55%, rgba(6, 78, 59, 0.14), transparent 48%), linear-gradient(165deg, rgb(3, 5, 16) 0%, rgb(5, 9, 26) 30%, rgb(2, 6, 18) 60%, rgb(6, 8, 22) 100%); background-size: auto; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* overflow-x removed from body — keeping it only on html avoids body becoming a scroll container, which would break position:fixed on all children */ color: rgb(255, 255, 255); } body::before { background: linear-gradient(rgba(245, 158, 11, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 158, 11, 0.045) 1px, transparent 1px), repeating-linear-gradient(115deg, transparent 0 88px, rgba(253, 224, 71, 0.05) 89px, transparent 94px), linear-gradient(90deg, transparent 0 13%, rgba(253, 224, 71, 0.08) 13.15% 13.35%, transparent 13.5% 86.5%, rgba(14, 165, 233, 0.055) 86.65% 86.85%, transparent 87%), radial-gradient(ellipse 65% 45% at 68% 18%, rgba(253, 224, 71, 0.14), transparent 52%), radial-gradient(ellipse 42% 32% at 18% 82%, rgba(14, 165, 233, 0.11), transparent 48%), radial-gradient(ellipse 28% 28% at 82% 88%, rgba(16, 185, 129, 0.09), transparent 40%); background-size: 52px 52px, 52px 52px, auto, auto, auto, auto, auto; content: ""; inset: 0; opacity: 1; pointer-events: none; position: fixed; z-index: 0; } body::after { background: url("../assets/padel-racket-photo.png "); background-position: right var(--players-right) top var(--players-top); background-repeat: no-repeat; background-size: var(--players-size) auto; content: ""; filter: saturate(1.18) contrast(1.06) brightness(1.12); inset: 0; opacity: 0.72; pointer-events: none; position: fixed; z-index: 0; } /* Franja sólida bajo el notch/isla dinámica en iOS: sin esto, al hacer scroll (con viewport-fit=cover) el contenido de la página puede verse por detrás de la barra de estado en vez de quedar oculto. */ .safe-area-top-shield { background: rgb(3, 5, 16); height: env(safe-area-inset-top); inset: 0 0 auto 0; pointer-events: none; position: fixed; z-index: 99999; } /* ============================================= HOME / LANDING ============================================= */ body.home-page { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.95) 90%), url("../assets/padel-court-bg.jpg") center center / cover no-repeat fixed !important; min-height: 100vh; } body.home-page::before, body.home-page::after, body.home-page .home-motion-scene { display: none !important; } body.home-page::before { animation: homeBackgroundDrift 18s ease-in-out infinite alternate; background: linear-gradient(115deg, rgba(2, 4, 10, 0.6) 0%, rgba(2, 4, 10, 0.2) 48%, rgba(2, 4, 10, 0.6) 100%), radial-gradient(ellipse 46% 32% at 50% 34%, rgba(34, 197, 94, 0.25), transparent 62%), radial-gradient(ellipse 38% 26% at 72% 68%, rgba(245, 158, 11, 0.18), transparent 58%), repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, 0.055) 96px, transparent 98px), linear-gradient(155deg, rgb(6, 18, 20), rgb(3, 8, 16) 56%, rgb(4, 5, 12)); background-size: 100% 100%, 100% 100%, 100% 100%, 190px 190px, 100% 100%; content: ""; filter: saturate(1.08); inset: -8%; opacity: 1; pointer-events: none; position: fixed; transform: scale(1.04); z-index: 0; } body.home-page::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.42)), radial-gradient(ellipse 60% 36% at 50% 42%, transparent 0 34%, rgba(0, 0, 0, 0.28) 72%), linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.32)); content: ""; filter: none; inset: 0; opacity: 1; pointer-events: none; position: fixed; z-index: 1; } .home-motion-scene { inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: 0; } .home-language-switch { position: fixed !important; right: clamp(0.85rem, 2vw, 1.35rem); top: clamp(0.85rem, 2vw, 1.35rem); z-index: 60; } body.has-top-bar .home-language-switch { top: calc(clamp(0.85rem, 2vw, 1.35rem) + var(--top-bar-offset, 0px)) !important; } .site-language-switch { position: fixed !important; right: clamp(0.85rem, 2vw, 1.35rem); top: clamp(0.85rem, 2vw, 1.35rem); z-index: 250; } .home-motion-scene::before { animation: homeCourtPulse 9s ease-in-out infinite alternate; background: linear-gradient(90deg, transparent 0 10%, rgba(255, 255, 255, 0.16) 10.2% 10.45%, transparent 10.7% 89.3%, rgba(255, 255, 255, 0.16) 89.55% 89.8%, transparent 90%), linear-gradient(0deg, transparent 0 16%, rgba(255, 255, 255, 0.12) 16.2% 16.45%, transparent 16.7% 82.9%, rgba(255, 255, 255, 0.12) 83.1% 83.35%, transparent 83.6%), linear-gradient(90deg, transparent 0 49.86%, rgba(255, 255, 255, 0.12) 49.94% 50.06%, transparent 50.14%), linear-gradient(0deg, transparent 0 49.82%, rgba(34, 197, 94, 0.32) 49.92% 50.08%, transparent 50.18%); content: ""; height: 72vh; left: 50%; min-height: 520px; opacity: 0.68; position: absolute; top: 50%; transform: translate(-50%, -40%) perspective(760px) rotateX(62deg) rotateZ(-9deg); width: 118vw; } .home-motion-scene::after { animation: homeRacketSweep 14s ease-in-out infinite; background: url("../assets/padel-racket-photo.png ") center / contain no-repeat; content: ""; filter: none; height: clamp(230px, 36vw, 520px); opacity: 0.18; position: absolute; right: -6vw; top: 9vh; transform: rotate(-28deg); width: clamp(230px, 36vw, 520px); } /* Hide messy court lines and floating balls on home page for a premium clean background */ body.home-page .home-court-line, body.home-page .home-ball { display: none !important; } .home-court-line { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); border-radius: 999px; height: 2px; left: 12%; opacity: 0.44; position: absolute; transform: rotate(-12deg); width: 78%; } .home-court-line-one { animation: homeLineSlide 7.5s linear infinite; top: 26%; } .home-court-line-two { animation: homeLineSlide 9s linear infinite reverse; top: 57%; } .home-court-line-three { animation: homeLineSlide 11s linear infinite; top: 79%; } .home-ball { background: url("../assets/padel-ball-real.svg") center / contain no-repeat; border-radius: 999px; filter: drop-shadow(0 0 18px rgba(253, 224, 71, 0.34)); height: clamp(28px, 4vw, 58px); opacity: 0.72; position: absolute; width: clamp(28px, 4vw, 58px); } .home-ball-one { animation: homeBallArc 5.8s ease-in-out infinite; left: 12%; top: 34%; } .home-ball-two { animation: homeBallArcTwo 8.2s ease-in-out infinite; bottom: 18%; right: 18%; } .home-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: clamp(1.2rem, 3vw, 2rem); position: relative; z-index: 2; } .home-hero { align-items: center; animation: homeHeroIn 820ms ease-out both; display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.55rem); justify-content: center; max-width: min(92vw, 960px); text-align: center; } .home-logo-frame { display: inline-flex; isolation: isolate; position: relative; } .home-logo-frame::before { background: radial-gradient(circle, rgba(253, 224, 71, 0.34), rgba(245, 158, 11, 0.16) 42%, transparent 70%); border-radius: 999px; content: ""; filter: blur(20px); inset: -18%; opacity: 0.82; position: absolute; transform: scale(0.92); z-index: -1; } .home-logo { border-radius: 28%; box-shadow: none; display: block; filter: none; height: clamp(124px, 19vw, 238px); object-fit: contain; opacity: 0.99; width: clamp(124px, 19vw, 238px); } .home-title { filter: drop-shadow(0 0 22px rgba(245, 158, 11, 0.2)); height: auto; max-width: min(86vw, 860px); object-fit: contain; width: clamp(300px, 54vw, 860px); } .home-tagline { background: linear-gradient(180deg, rgb(255, 246, 196) 0%, rgb(253, 224, 71) 34%, rgb(191, 124, 23) 70%, rgb(255, 241, 168) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; display: block; font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.3rem, 3vw, 1.9rem); font-style: normal; font-weight: 400; letter-spacing: 0.02em; isolation: isolate; line-height: 1.22; margin: clamp(-0.5rem, -0.9vw, -0.26rem) auto 0; max-width: min(88vw, 780px); padding: 0.18rem clamp(0.7rem, 2vw, 1.1rem) 0.34rem; position: relative; text-transform: uppercase; text-shadow: 0 10px 24px rgba(0, 0, 0, 0.78), 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 12px rgba(245, 158, 11, 0.14); } .home-tagline::before, .home-tagline::after { background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.52), rgba(34, 197, 94, 0.22), transparent); border-radius: 999px; content: ""; left: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); width: min(74%, 520px); z-index: -1; } .home-tagline::before { filter: blur(12px); height: 14px; opacity: 0.2; top: 46%; } .home-tagline::after { bottom: 0; height: 2px; opacity: 0.42; } .home-menu-button { align-items: center; background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 52%, rgb(34, 197, 94)); border: 0; border-radius: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 34px rgba(245, 158, 11, 0.2); color: rgb(4, 8, 16); cursor: pointer; display: inline-flex; font-size: 0.9rem; font-weight: 950; gap: 0.7rem; justify-content: center; letter-spacing: 0; min-height: 52px; min-width: 190px; overflow: hidden; padding: 0.95rem 1.2rem; position: relative; text-transform: uppercase; transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .home-menu-button::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent); content: ""; inset: 0 auto 0 -70%; position: absolute; transform: skewX(-18deg); transition: left 520ms ease; width: 46%; } .home-menu-button:hover { box-shadow: 0 24px 58px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 0 44px rgba(245, 158, 11, 0.3); filter: brightness(1.06); transform: translateY(-2px); } .home-menu-button:hover::before { left: 128%; } .home-menu-button-icon { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; display: block; height: 9px; transform: rotate(45deg) translateY(-2px); width: 9px; } .home-menu-panel { inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 260ms ease; z-index: 50; } .home-menu-is-open .home-menu-panel { opacity: 1; pointer-events: auto; } .home-menu-is-open .home-language-switch { opacity: 0; pointer-events: none; } .home-menu-backdrop { background: rgba(0, 0, 0, 0.52); inset: 0; position: absolute; } .home-menu-sheet { background: linear-gradient(135deg, rgba(7, 11, 22, 0.98), rgba(3, 7, 15, 0.98)), radial-gradient(ellipse 38% 70% at 82% 0%, rgba(34, 197, 94, 0.14), transparent 62%), radial-gradient(ellipse 42% 64% at 22% 8%, rgba(245, 158, 11, 0.15), transparent 58%); border-bottom: 1px solid rgba(253, 224, 71, 0.2); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.58); left: 0; max-height: min(88vh, 760px); overflow-y: auto; padding: clamp(1rem, 3vw, 2rem); position: absolute; right: 0; top: 0; transform: translateY(-105%); transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1); } .home-menu-is-open .home-menu-sheet { transform: translateY(0); } .home-menu-head { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin: 0 auto clamp(1rem, 2.5vw, 1.5rem); max-width: 1080px; } .home-menu-eyebrow { color: rgb(253, 230, 138); font-size: 0.72rem; font-weight: 950; letter-spacing: 0; margin: 0; text-transform: uppercase; } .home-menu-head h2 { color: rgb(248, 250, 252); font-size: 1.55rem; font-weight: 950; line-height: 1.02; margin: 0.2rem 0 0; } .home-menu-close { align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; color: rgb(248, 250, 252); cursor: pointer; display: flex; flex: 0 0 auto; height: 44px; justify-content: center; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; width: 44px; } .home-menu-close span, .home-menu-close span::after { background: currentColor; border-radius: 999px; content: ""; display: block; height: 2px; width: 18px; } .home-menu-close span { transform: rotate(45deg); } .home-menu-close span::after { transform: rotate(90deg); } .home-menu-close:hover { background: rgba(253, 224, 71, 0.14); border-color: rgba(253, 224, 71, 0.3); transform: translateY(-1px); } .home-menu-grid { display: flex; flex-direction: column; gap: 1rem; margin: 0 auto; max-width: 1080px; } .home-menu-group { display: flex; flex-direction: column; gap: 0.42rem; } .home-menu-group-title { color: rgb(253, 230, 138); font-size: 0.9rem; font-weight: 950; letter-spacing: 0.16em; margin: 0; text-transform: uppercase; } .home-menu-group-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(1, minmax(0, 1fr)); } .home-menu-card { align-items: center; background: rgba(255, 255, 255, 0.065); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: rgb(248, 250, 252); display: grid; gap: 0.85rem; grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 76px; padding: 0.9rem; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .home-menu-card:hover { background: rgba(253, 224, 71, 0.11); border-color: rgba(253, 224, 71, 0.26); transform: translateY(-2px); } .home-menu-card-active { background: rgba(245, 158, 11, 0.13); border-color: rgba(253, 224, 71, 0.34); } .home-menu-card-muted { opacity: 0.68; } .home-menu-card-section { background: rgba(34, 197, 94, 0.075); } .home-menu-card-icon { align-items: center; background: rgba(253, 224, 71, 0.13); border: 1px solid rgba(253, 224, 71, 0.2); border-radius: 8px; color: rgb(253, 230, 138); display: flex; height: 48px; justify-content: center; width: 48px; } .home-menu-card-icon svg { display: block; fill: none; height: 26px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 26px; } .home-icon-face, .home-icon-pair, .home-icon-cards, .home-icon-clues { background: rgba(14, 165, 233, 0.13); border-color: rgba(14, 165, 233, 0.2); color: rgb(125, 211, 252); } .home-icon-stats, .home-icon-trophy, .home-icon-shop { background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.2); color: rgb(134, 239, 172); } .home-menu-card strong { display: block; font-size: 1rem; font-weight: 950; line-height: 1.1; } .home-menu-card small { color: rgb(203, 213, 225); display: block; font-size: 0.78rem; font-weight: 700; line-height: 1.25; margin-top: 0.18rem; } .home-menu-card em { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgb(253, 230, 138); font-size: 0.66rem; font-style: normal; font-weight: 950; letter-spacing: 0; padding: 0.35rem 0.55rem; text-transform: uppercase; white-space: nowrap; } @media (min-width: 720px) { .home-menu-head h2 { font-size: 2.2rem; } .home-menu-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .home-menu-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { body.home-page { overflow-y: auto; } .home-shell { min-height: 100svh; padding: 1rem; } .home-logo { height: clamp(112px, 34vw, 160px); width: clamp(112px, 34vw, 160px); } .home-title { width: min(88vw, 420px); } .home-tagline { font-size: clamp(0.94rem, 4vw, 1.12rem); max-width: min(86vw, 350px); } .home-menu-button { min-width: min(76vw, 220px); } .home-menu-sheet { background: linear-gradient(135deg, rgb(7, 11, 22), rgb(3, 7, 15)), radial-gradient(ellipse 42% 62% at 80% 0%, rgba(34, 197, 94, 0.12), transparent 62%); max-height: 100svh; min-height: 100svh; padding-top: max(1rem, env(safe-area-inset-top)); } .home-menu-card { gap: 0.65rem; grid-template-columns: 44px minmax(0, 1fr); padding: 0.8rem; } .home-menu-card-icon { height: 44px; width: 44px; } .home-menu-card em { grid-column: 2; justify-self: start; max-width: 100%; white-space: normal; } } .venue-page { background: radial-gradient(circle at 14% 12%, rgba(20, 184, 166, 0.2), transparent 28rem), radial-gradient(circle at 86% 6%, rgba(245, 158, 11, 0.18), transparent 24rem), linear-gradient(145deg, rgb(5, 10, 22), rgb(8, 13, 28) 48%, rgb(2, 6, 23)); color: rgb(248, 250, 252); min-height: 100svh; overflow-x: hidden; } .venue-shell { align-items: center; display: flex; justify-content: center; min-height: 100svh; padding: clamp(0.7rem, 2vw, 1.4rem); padding-left: calc(var(--nav-rail-w) + max(clamp(0.7rem, 2vw, 1.4rem), env(safe-area-inset-left))); padding-right: max(clamp(0.7rem, 2vw, 1.4rem), env(safe-area-inset-right)); } .venue-game { display: grid; gap: clamp(0.55rem, 1.4svh, 0.95rem); margin-inline: auto; max-width: min(100%, 920px); min-width: 0; width: 100%; } .venue-title-block { align-items: center; animation: venueTitleEnter 720ms cubic-bezier(0.16, 1, 0.3, 1) both; display: grid; gap: 0.32rem; justify-items: center; margin-inline: auto; position: relative; text-align: center; } .venue-title-block::before { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(253, 224, 71, 0.3), transparent 68%), radial-gradient(ellipse 55% 55% at 72% 52%, rgba(20, 184, 166, 0.2), transparent 64%); content: ""; filter: blur(24px); height: 3.8rem; left: 50%; opacity: 0.72; pointer-events: none; position: absolute; top: 48%; transform: translate(-50%, -50%); width: min(82vw, 520px); z-index: -1; } .venue-title-kicker { align-items: center; background: rgba(15, 23, 42, 0.74); border: 1px solid rgba(253, 224, 71, 0.22); border-radius: 999px; color: rgb(153, 246, 228); display: inline-flex; font-size: clamp(0.62rem, 1.5vw, 0.76rem); font-weight: 950; letter-spacing: 0.16em; line-height: 1; min-height: 28px; padding: 0.42rem 0.72rem; text-transform: uppercase; } .venue-heading, .racket-header h1, .memory-header h1 { background: linear-gradient(135deg, rgb(254, 240, 138), rgb(245, 158, 11) 52%, rgb(20, 184, 166)); -webkit-background-clip: text; background-clip: text; color: rgb(248, 250, 252); -webkit-text-fill-color: transparent; font-size: clamp(2.4rem, 7.2vw, 4.1rem); font-weight: 950; letter-spacing: -0.01em; line-height: 1.06; margin: 0 0 0.12em; padding-bottom: 0.18em; text-align: center; } .venue-heading { margin-bottom: 0.5rem; } /* .venue-title { background: linear-gradient(180deg, rgb(255, 251, 224) 0%, rgb(253, 224, 71) 42%, rgb(20, 184, 166) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-flex; align-items: baseline; justify-content: center; font-size: clamp(2rem, 7.4vw, 4.75rem); font-weight: 950; line-height: 0.9; margin: 0; min-height: 1.04em; padding: 0 0.04em 0.2rem; position: relative; text-align: center; text-shadow: none; text-transform: uppercase; } */ .venue-title::after { background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.95), rgba(20, 184, 166, 0.95), transparent); border-radius: 999px; bottom: 0; box-shadow: 0 0 18px rgba(253, 224, 71, 0.28); content: ""; height: 3px; left: 8%; opacity: 0.94; position: absolute; width: 84%; } .venue-title-typing { white-space: nowrap; } .venue-title-letter { animation: venueLetterIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both; display: inline-block; opacity: 0; transform: translateY(0.2em); } .venue-title-cursor { animation: venueCursorBlink 0.9s ease-in-out infinite; background: rgba(253, 224, 71, 0.96); border-radius: 999px; box-shadow: 0 0 14px rgba(253, 224, 71, 0.32); display: inline-block; height: 0.78em; margin-left: 0.12em; opacity: 1; transform: translateY(0.08em); width: 2px; } .venue-title-cursor-fade { animation: venueCursorFade 520ms ease-out forwards; } .venue-attempts { align-items: center; display: flex; gap: clamp(0.5rem, 2vw, 0.8rem); justify-content: center; } .venue-attempt-slot { align-items: center; background: rgba(15, 23, 42, 0.76); border: 2px solid rgba(148, 163, 184, 0.56); border-radius: 999px; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.03); display: inline-flex; height: clamp(28px, 8vw, 42px); justify-content: center; position: relative; width: clamp(28px, 8vw, 42px); transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease, transform 220ms ease; } .venue-attempt-slot::before, .venue-attempt-slot::after { content: ""; opacity: 0; position: absolute; transform-origin: center; } .venue-attempt-slot.is-miss { animation: venueAttemptPop 360ms cubic-bezier(0.16, 1, 0.3, 1) both; background: rgba(127, 29, 29, 0.82); border-color: rgba(254, 202, 202, 0.78); box-shadow: 0 12px 24px rgba(127, 29, 29, 0.22); } .venue-attempt-slot.is-miss::before, .venue-attempt-slot.is-miss::after { background: rgb(254, 226, 226); border-radius: 999px; height: 3px; opacity: 1; width: 54%; } .venue-attempt-slot.is-miss::before { animation: venueCrossOne 360ms ease-out both; } .venue-attempt-slot.is-miss::after { animation: venueCrossTwo 360ms ease-out both; } .venue-attempt-slot.is-hit { animation: venueAttemptPop 420ms cubic-bezier(0.16, 1, 0.3, 1) both; background: linear-gradient(145deg, rgb(34, 197, 94), rgb(20, 184, 166)); border-color: rgba(187, 247, 208, 0.95); box-shadow: 0 14px 30px rgba(20, 184, 166, 0.32); } .venue-attempt-slot.is-hit::before { border-bottom: 3px solid rgb(236, 253, 245); border-right: 3px solid rgb(236, 253, 245); height: 48%; opacity: 1; top: 17%; transform: rotate(42deg) scale(1); width: 24%; animation: venueTick 420ms ease-out both; } .venue-attempt-slot.is-muted { opacity: 0.34; transform: scale(0.86); } .venue-photo-card { aspect-ratio: 4 / 3; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: clamp(14px, 3vw, 22px); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04); margin: 0 auto; max-height: min(40svh, 460px); overflow: hidden; position: relative; width: min(100%, 720px); } .venue-photo-card::after { background: linear-gradient(180deg, transparent 58%, rgba(2, 6, 23, 0.2)); content: ""; inset: 0; pointer-events: none; position: absolute; } .venue-photo-card img { display: block; height: 100%; object-fit: cover; width: 100%; } .venue-answer { display: grid; gap: 0.55rem; grid-template-columns: minmax(0, 1fr); margin-inline: auto; max-width: min(100%, 720px); position: relative; width: 100%; } .venue-answer label { color: rgb(203, 213, 225); font-size: clamp(0.72rem, 2.6vw, 0.82rem); font-weight: 900; text-transform: uppercase; } .venue-search-wrap { min-width: 0; position: relative; } .venue-answer input { background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(20, 184, 166, 0.28); border-radius: 12px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22); color: rgb(15, 23, 42); font-size: 1rem; font-weight: 800; min-height: 50px; outline: 0; padding: 0 1rem; width: 100%; } .venue-answer input:focus { border-color: rgba(20, 184, 166, 0.86); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16), 0 16px 32px rgba(0, 0, 0, 0.26); } .venue-submit { align-items: center; background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 55%, rgb(20, 184, 166)); border: 0; border-radius: 12px; color: rgb(2, 6, 23); cursor: pointer; display: inline-flex; font-size: 0.95rem; font-weight: 950; justify-content: center; min-height: 50px; padding: 0 1.1rem; touch-action: manipulation; transition: filter 160ms ease, transform 160ms ease; } .venue-submit:disabled, .venue-answer input:disabled { cursor: default; opacity: 0.72; } .venue-submit:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); } .venue-feedback { color: rgb(226, 232, 240); font-size: 0.85rem; font-weight: 800; margin: 0; min-height: 1.1rem; text-align: center; } .venue-suggestions { background: rgba(248, 250, 252, 0.98); border: 1px solid rgba(148, 163, 184, 0.36); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34); color: rgb(15, 23, 42); left: 0; list-style: none; margin: 0.4rem 0 0; max-height: min(36svh, 260px); overflow-y: auto; padding: 0.35rem; position: absolute; right: 0; top: 100%; z-index: 60; } .venue-suggestions button { background: transparent; border: 0; border-radius: 9px; color: inherit; cursor: pointer; display: block; font-size: 0.94rem; font-weight: 850; min-height: 42px; padding: 0.65rem 0.75rem; text-align: left; width: 100%; } .venue-suggestions button:hover, .venue-suggestions button:focus-visible { background: rgba(20, 184, 166, 0.12); outline: 0; } .venue-countdown-card { background: rgba(15, 23, 42, 0.82); border: 1px solid rgba(20, 184, 166, 0.32); border-radius: 14px; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26); display: grid; gap: 0.18rem; margin: 0 auto; max-width: min(100%, 420px); padding: 0.8rem 1rem; text-align: center; width: 100%; } .venue-countdown-card span, .venue-modal-countdown span { color: rgb(148, 163, 184); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; } .venue-countdown-card strong, .venue-modal-countdown strong { color: rgb(253, 224, 71); font-size: clamp(1.05rem, 4vw, 1.45rem); font-weight: 950; } .venue-countdown-card small { color: rgb(203, 213, 225); font-size: 0.8rem; font-weight: 800; } .venue-modal { align-items: center; backdrop-filter: blur(18px); background: rgba(2, 6, 23, 0.7); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 220; } .venue-modal-card { animation: venueModalIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both; background: linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.98)), radial-gradient(circle at 20% 10%, rgba(20, 184, 166, 0.22), transparent 20rem); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 20px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48); display: grid; gap: 0.75rem; max-width: 520px; padding: clamp(1.2rem, 5vw, 1.8rem); position: relative; text-align: center; width: min(92vw, 520px); } .venue-modal-close { align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgb(226, 232, 240); cursor: pointer; display: inline-flex; font-size: 1.2rem; font-weight: 900; height: 38px; justify-content: center; position: absolute; right: 0.8rem; top: 0.8rem; width: 38px; } .venue-modal-eyebrow { color: rgb(45, 212, 191); font-size: 0.76rem; font-weight: 950; margin: 0; text-transform: uppercase; } .venue-modal h2 { color: rgb(248, 250, 252); font-size: clamp(1.45rem, 7vw, 2.2rem); font-weight: 950; line-height: 1; margin: 0; } .venue-modal p { color: rgb(203, 213, 225); font-size: 0.98rem; font-weight: 750; line-height: 1.45; margin: 0; } .venue-modal-answer { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; display: grid; gap: 0.28rem; padding: 1rem; } .venue-modal-answer strong { color: rgb(253, 224, 71); font-size: clamp(1.05rem, 4vw, 1.35rem); font-weight: 950; } .venue-modal-answer span, .venue-modal-answer small { color: rgb(226, 232, 240); font-size: 0.95rem; font-weight: 850; } .venue-modal-countdown { border-top: 1px solid rgba(148, 163, 184, 0.18); display: grid; gap: 0.16rem; padding-top: 0.8rem; } @keyframes venueAttemptPop { 0% { transform: scale(0.7); } 65% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes venueCrossOne { 0% { opacity: 0; transform: rotate(0deg) scaleX(0.1); } 100% { opacity: 1; transform: rotate(45deg) scaleX(1); } } @keyframes venueCrossTwo { 0% { opacity: 0; transform: rotate(0deg) scaleX(0.1); } 100% { opacity: 1; transform: rotate(-45deg) scaleX(1); } } @keyframes venueTick { 0% { opacity: 0; transform: rotate(42deg) scale(0.2); } 100% { opacity: 1; transform: rotate(42deg) scale(1); } } @keyframes venueModalIn { 0% { opacity: 0; transform: translateY(18px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (min-width: 720px) { .venue-answer { align-items: end; grid-template-columns: minmax(0, 1fr) auto; } .venue-answer label, .venue-feedback { grid-column: 1 / -1; } .venue-submit { min-width: 148px; } } @media (max-width: 520px) { .venue-shell { align-items: start; padding-top: max(6.25rem, env(safe-area-inset-top) + 4rem); } .venue-game { gap: clamp(0.75rem, 2svh, 1.1rem); padding-top: 0.4rem; } .venue-title, .venue-heading { font-size: clamp(1.7rem, 9vw, 2.5rem); line-height: 1.05; padding-bottom: 0.18em; } .venue-title-kicker { font-size: 0.90rem; min-height: 26px; padding-inline: 0.62rem; } .venue-photo-card { aspect-ratio: 1 / 0.86; max-height: 38svh; width: min(84%, 520px); } .venue-modal-card { width: min(95vw, 520px); } } @keyframes venueLetterIn { from { opacity: 0; transform: translateY(0.28em) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes venueCursorBlink { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } } @keyframes venueCursorFade { from { opacity: 1; } to { opacity: 0; } } /* @keyframes venueTitleEnter { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(6px); } 60% { opacity: 1; transform: translateY(0) scale(1.01); filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } */ .app-shell { animation: appEnter 540ms ease-out both; display: flex; flex-direction: column; margin: 0 auto; max-width: min(100%, 28rem); min-height: 100vh; padding: 2.75rem 1rem 1rem calc(var(--nav-rail-w) + 1rem); position: relative; width: 100%; z-index: 1; } .gold-shavings { inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: 0; } .gold-shavings span { animation: shavingFall var(--fall-duration, 13s) linear infinite; background: linear-gradient(90deg, rgba(253, 230, 138, 0), rgba(253, 230, 138, 0.92), rgba(245, 158, 11, 0)); border-radius: 999px; box-shadow: 0 0 12px rgba(253, 224, 71, 0.56), 0 0 24px rgba(245, 158, 11, 0.26); height: 3px; left: var(--left); opacity: 0; position: absolute; top: -12vh; transform: rotate(var(--angle)); width: var(--width, 46px); } .gold-shavings span:nth-child(1) { --left: 8%; --angle: 118deg; --width: 54px; --fall-duration: 16s; animation-delay: -1s; } .gold-shavings span:nth-child(2) { --left: 17%; --angle: 68deg; --width: 38px; --fall-duration: 12s; animation-delay: -7s; } .gold-shavings span:nth-child(3) { --left: 28%; --angle: 106deg; --width: 66px; --fall-duration: 18s; animation-delay: -12s; } .gold-shavings span:nth-child(4) { --left: 38%; --angle: 74deg; --width: 42px; --fall-duration: 13s; animation-delay: -4s; } .gold-shavings span:nth-child(5) { --left: 47%; --angle: 125deg; --width: 58px; --fall-duration: 17s; animation-delay: -9s; } .gold-shavings span:nth-child(6) { --left: 56%; --angle: 62deg; --width: 36px; --fall-duration: 11s; animation-delay: -3s; } .gold-shavings span:nth-child(7) { --left: 64%; --angle: 112deg; --width: 70px; --fall-duration: 19s; animation-delay: -15s; } .gold-shavings span:nth-child(8) { --left: 72%; --angle: 77deg; --width: 44px; --fall-duration: 14s; animation-delay: -6s; } .gold-shavings span:nth-child(9) { --left: 82%; --angle: 121deg; --width: 62px; --fall-duration: 18s; animation-delay: -10s; } .gold-shavings span:nth-child(10) { --left: 92%; --angle: 69deg; --width: 40px; --fall-duration: 12s; animation-delay: -2s; } .gold-shavings span:nth-child(11) { --left: 12%; --angle: 130deg; --width: 76px; --fall-duration: 20s; animation-delay: -16s; } .gold-shavings span:nth-child(12) { --left: 33%; --angle: 58deg; --width: 35px; --fall-duration: 15s; animation-delay: -8s; } .gold-shavings span:nth-child(13) { --left: 68%; --angle: 116deg; --width: 52px; --fall-duration: 13s; animation-delay: -11s; } .gold-shavings span:nth-child(14) { --left: 87%; --angle: 72deg; --width: 48px; --fall-duration: 16s; animation-delay: -5s; } .play-layout { display: grid; gap: 1rem; justify-content: center; width: 100%; } .game-column { min-width: 0; width: 100%; } .intro-panel { animation: floatIn 600ms 90ms ease-out both; margin-bottom: 1.75rem; text-align: center; } .intro-panel > p { color: rgb(226, 232, 240); font-size: 0.875rem; margin: 0.75rem auto 0; max-width: 24rem; } .intro-panel > p[data-i18n="eyebrow"] { color: rgb(253, 230, 138); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.22em; margin-top: 0; text-transform: uppercase; } .brand-strip { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 1rem; } .header-actions { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-width: 0; width: 100%; } .brand-mark { border: 1px solid rgba(251, 191, 36, 0.42); border-radius: 999px; color: rgb(253, 230, 138); font-size: 0.68rem; font-weight: 950; letter-spacing: 0.16em; padding: 7px 10px; text-transform: uppercase; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .language-switch { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; display: inline-flex; padding: 3px; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .language-button { background: transparent; border: 0; border-radius: 999px; color: rgb(203, 213, 225); cursor: pointer; font-size: 0.72rem; font-weight: 950; line-height: 1; padding: 8px 10px; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .language-button-active { background: rgb(245, 158, 11); color: rgb(17, 24, 39); transform: translateY(-1px); } .language-switch-out .intro-panel, .language-switch-out .rules-panel, .language-switch-out .search-card, .language-switch-out .attribute-header, .language-switch-out #attempts { filter: blur(1px); opacity: 0.72; transition: filter 150ms ease, opacity 150ms ease; } .language-switch-in .intro-panel, .language-switch-in .rules-panel, .language-switch-in .search-card, .language-switch-in .attribute-header, .language-switch-in #attempts { animation: languageSwap 220ms ease-out both; } .header-share-button { background: linear-gradient(135deg, rgb(20, 184, 166), rgb(253, 224, 71)); border: 0; border-radius: 999px; color: rgb(8, 13, 25); cursor: pointer; font-size: 0.72rem; font-weight: 950; line-height: 1; min-height: 34px; max-width: 100%; overflow: visible; padding: 8px 11px; position: relative; text-align: center; white-space: nowrap; transition: filter 160ms ease, transform 160ms ease; } .profile-button, .logout-button { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 999px; color: rgb(253, 230, 138); cursor: pointer; font-size: 0.72rem; font-weight: 950; line-height: 1.15; max-width: 100%; min-height: 34px; overflow: visible; padding: 8px 10px; text-align: center; text-overflow: clip; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease; } .logout-button { border-color: rgba(248, 113, 113, 0.34); color: rgb(254, 202, 202); } .hidden { display: none !important; } /* Visible solo para lectores de pantalla -- para dar una jerarquia de encabezados real (h1, etc.) sin duplicar visualmente un titulo que ya existe como imagen de marca en la pagina. */ .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .cookie-consent { align-items: flex-end; display: flex; inset: 0; justify-content: center; padding: 1.2rem; position: fixed; z-index: 9999; } .cookie-consent-backdrop { background: rgba(2, 5, 13, 0.86); inset: 0; position: absolute; } .cookie-consent-panel { background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 25, 0.98)), radial-gradient(circle at 92% 8%, rgba(253, 224, 71, 0.18), transparent 24%); border: 1px solid rgba(251, 191, 36, 0.36); border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48); max-width: 720px; padding: 1.4rem 1.5rem; position: relative; width: min(94vw, 720px); z-index: 1; } .cookie-consent-panel h2 { color: rgb(253, 224, 71); font-size: 1.2rem; margin: 0 0 0.6rem; } .cookie-consent-panel p { color: rgb(203, 213, 225); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.1rem; } .cookie-consent-panel a { color: rgb(253, 224, 71); text-decoration: underline; } .cookie-consent-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; } .cookie-consent-accept { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71)); border: 0; border-radius: 8px; color: rgb(10, 12, 24); cursor: pointer; font-weight: 900; padding: 0.7rem 1.2rem; } .cookie-consent-accept:hover { filter: brightness(1.06); } .cookie-consent-reject { background: transparent; border: 1px solid rgba(148, 163, 184, 0.4); border-radius: 8px; color: rgb(148, 163, 184); cursor: pointer; font-weight: 700; padding: 0.7rem 1.2rem; } .cookie-consent-reject:hover { border-color: rgb(253, 224, 71); color: rgb(253, 224, 71); } /* Local utility compatibility for the PaDLE page. Keeps production free of CDN CSS/JS. */ .absolute { position: absolute; } .relative { position: relative; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .flex-1 { flex: 1 1 0%; } .flex-col { flex-direction: column; } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-5 { margin-top: 1.25rem; } .min-h-5 { min-height: 1.25rem; } .min-h-screen { min-height: 100vh; } .min-w-0 { min-width: 0; } .w-full { width: 100%; } .max-w-sm { max-width: 24rem; } .max-h-56 { max-height: 14rem; } .overflow-y-auto { overflow-y: auto; } .rounded-md { border-radius: 6px; } .rounded-lg { border-radius: 8px; } .border { border-width: 1px; } .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); } .bg-cyan-400 { background-color: rgb(34, 211, 238); } .bg-slate-900 { background-color: rgb(15, 23, 42); } .bg-slate-950 { background-color: rgb(2, 6, 23); } .bg-white { background-color: rgb(255, 255, 255); } .bg-white\/\[0\.04\] { background-color: rgba(255, 255, 255, 0.04); } .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2); } .bg-rose-500\/20 { background-color: rgba(244, 63, 94, 0.2); } .bg-sky-500\/20 { background-color: rgba(14, 165, 233, 0.2); } .p-3 { padding: 0.75rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-bottom: 0.5rem; padding-top: 0.5rem; } .py-3 { padding-bottom: 0.75rem; padding-top: 0.75rem; } .text-center { text-align: center; } .text-\[10px\] { font-size: 10px; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-xl { font-size: 1.25rem; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-black { font-weight: 900; } .uppercase { text-transform: uppercase; } .tracking-\[0\.22em\] { letter-spacing: 0.22em; } .text-amber-100 { color: rgb(254, 243, 199); } .text-amber-200 { color: rgb(253, 230, 138); } .text-emerald-200 { color: rgb(167, 243, 208); } .text-rose-200 { color: rgb(254, 205, 211); } .text-sky-200 { color: rgb(186, 230, 253); } .text-slate-200 { color: rgb(226, 232, 240); } .text-slate-300 { color: rgb(203, 213, 225); } .text-slate-400 { color: rgb(148, 163, 184); } .text-slate-950 { color: rgb(2, 6, 23); } .text-white { color: rgb(255, 255, 255); } .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .transition { transition-duration: 150ms; transition-property: color, background-color, border-color, box-shadow, transform; transition-timing-function: ease; } .active\:scale-95:active { transform: scale(0.95); } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:bg-slate-600:disabled { background-color: rgb(71, 85, 105); } .disabled\:text-slate-300:disabled { color: rgb(203, 213, 225); } .focus\:border-cyan-300:focus { border-color: rgb(103, 232, 249); } .focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--focus-ring-color, rgba(103, 232, 249, 0.3)); } .focus\:ring-cyan-300\/30:focus { --focus-ring-color: rgba(103, 232, 249, 0.3); } .header-share-button:hover { filter: brightness(1.08); transform: translateY(-1px); } .brand-mark:hover, .language-switch:hover, .profile-button:hover, .logout-button:hover { box-shadow: 0 10px 22px rgba(245, 158, 11, 0.16); transform: translateY(-1px); } .brand-mark:hover { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.7); } .profile-button:hover { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.56); } .logout-button:hover { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.58); } .header-actions > *, .brand-mark { animation: topActionIn 520ms ease-out both; } .header-actions, .header-actions button, .header-actions a, .language-switch, .language-button, .header-share-button, .profile-button, .logout-button { pointer-events: auto; position: relative; touch-action: manipulation; z-index: 40; } .home-language-switch, .site-language-switch { position: fixed; } .header-share-button, .profile-button, .logout-button, .language-button { align-items: center; display: inline-flex; justify-content: center; } .brand-mark { animation-delay: 40ms; } .header-actions > *:nth-child(1) { animation-delay: 90ms; } .header-actions > *:nth-child(2) { animation-delay: 135ms; } .header-actions > *:nth-child(3) { animation-delay: 180ms; } .header-actions > *:nth-child(4) { animation-delay: 225ms; } .title-lockup { align-items: center; aspect-ratio: 2.75 / 1; display: flex; isolation: isolate; justify-content: center; margin: 0.1rem auto 0; max-width: min(92vw, 560px); overflow: visible; position: relative; width: 100%; z-index: 2; } .title-lockup::before { content: none; } .padle-title-logo { display: block; filter: brightness(1.04) contrast(1.06) saturate(1.03) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 13px rgba(253, 224, 71, 0.16)); height: auto; object-fit: contain; object-position: center; position: absolute; top: 50%; transform: translateY(-50%) scale(1.02); transform-origin: center; width: 100%; z-index: 1; } .rules-panel, .search-card { animation: floatIn 560ms ease-out both; } .rules-panel { animation-delay: 170ms; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; margin-bottom: 1rem; padding: 0.75rem; } .rules-panel > div { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; } .rules-panel > div > div { align-items: center; border-radius: 6px; display: flex; font-size: 0.75rem; font-weight: 800; justify-content: center; line-height: 1.2; min-height: 38px; overflow-wrap: anywhere; padding: 0.5rem; } .rules-panel > div > div:nth-child(1) { background: rgba(16, 185, 129, 0.2); color: rgb(167, 243, 208); } .rules-panel > div > div:nth-child(2) { background: rgba(244, 63, 94, 0.2); color: rgb(254, 205, 211); } .rules-panel > div > div:nth-child(3) { background: rgba(14, 165, 233, 0.2); color: rgb(186, 230, 253); } .search-card { animation-delay: 240ms; isolation: isolate; margin-bottom: 1rem; z-index: 30; } .search-card label { color: rgb(226, 232, 240); display: block; font-size: 0.875rem; font-weight: 800; margin-bottom: 0.5rem; } .search-card > div { display: flex; gap: 0.5rem; } .ad-slot { align-items: center; animation: adPulse 3.2s ease-in-out infinite; background: repeating-linear-gradient( 135deg, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.14) 8px, rgba(15, 23, 42, 0.5) 8px, rgba(15, 23, 42, 0.5) 16px ); border: 1px dashed rgba(203, 213, 225, 0.42); border-radius: 8px; color: rgb(253, 230, 138); display: flex; font-size: 11px; font-weight: 800; height: 50px; justify-content: center; letter-spacing: 0.08em; margin-left: auto; margin-right: auto; margin-bottom: 1rem; max-width: 320px; text-align: center; width: 100%; } .app-shell > .ad-slot:last-child { margin-bottom: 0; margin-top: 1.25rem; } .search-input { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.42); color: rgb(15, 23, 42); flex: 1; font-size: 1rem; min-width: 0; outline: none; padding: 0.75rem 1rem; } .search-input:focus { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 18px 42px rgba(2, 6, 23, 0.42); transform: translateY(-1px); } .guess-button { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71)) !important; border: 0; border-radius: 8px; color: rgb(17, 24, 39) !important; cursor: pointer; font-size: 0.875rem; font-weight: 950; line-height: 1.1; min-width: max-content; overflow: visible; padding: 0.75rem 1rem; white-space: normal; } .guess-button:disabled { background: rgb(71, 85, 105) !important; color: rgb(203, 213, 225) !important; } .guess-button, .header-share-button { position: relative; overflow: hidden; } .guess-button::after, .header-share-button::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent); content: ""; inset: 0 auto 0 -75%; position: absolute; transform: skewX(-18deg); transition: left 480ms ease; width: 48%; } .guess-button:not(:disabled):hover::after, .header-share-button:hover::after { left: 128%; } .guess-button:not(:disabled) { animation: readyPulse 1.8s ease-in-out infinite; } .suggestions-list { animation: suggestionsIn 180ms ease-out both; box-shadow: 0 22px 44px rgba(2, 6, 23, 0.72), 0 0 0 1px rgba(34, 211, 238, 0.08); left: 0; list-style: none; padding: 0.3rem; position: absolute; right: 0; transform-origin: top center; z-index: 1000; } .attribute-header, #attempts, .result-overlay { position: relative; z-index: 1; } .attribute-header { color: rgb(148, 163, 184); display: grid; gap: 4px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 0.75rem; text-align: center; text-transform: uppercase; } .attribute-header span { font-size: 0.62rem; font-weight: 900; } #attempts { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; } .guess-row { display: grid; gap: 4px; grid-template-columns: repeat(6, minmax(0, 1fr)); perspective: 700px; } .tile { align-items: center; --paddle-filter: grayscale(0.84) saturate(0.5) brightness(0.86); --paddle-glow: rgba(148, 163, 184, 0.24); --paddle-overlay: transparent; --paddle-overlay-opacity: 0; --paddle-scale: 1.16; --tile-text: rgb(18, 24, 36); background: transparent; border: 0; display: grid; justify-content: center; height: 92px; min-height: 92px; max-height: 92px; overflow: visible; padding: 1rem 0.48rem 1.2rem; position: relative; text-align: center; transition: transform 180ms ease, filter 180ms ease; will-change: transform; } .tile::after { -webkit-mask-image: url("../assets/padel-racket-photo.png "); mask-image: url("../assets/padel-racket-photo.png "); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 36%, rgba(255, 255, 255, 0.08) 68%), var(--paddle-overlay); content: ""; inset: 0; opacity: var(--paddle-overlay-opacity); pointer-events: none; position: absolute; transform: rotate(-5deg) scale(var(--paddle-scale)); transform-origin: center; z-index: 0; } .tile::before { background: url("../assets/padel-racket-photo.png ") center / contain no-repeat; content: ""; filter: var(--paddle-filter) drop-shadow(0 8px 12px rgba(2, 6, 23, 0.34)); inset: 0; opacity: 1; pointer-events: none; position: absolute; transform: rotate(-5deg) scale(var(--paddle-scale)); transform-origin: center; z-index: 0; } .tile::before, .tile::after { backface-visibility: hidden; } .profile-alert { background: linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(8, 13, 25, 0.92)), radial-gradient(circle at 94% 8%, rgba(253, 224, 71, 0.12), transparent 24%); border: 1px solid rgba(251, 191, 36, 0.22); border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); } .profile-alert h2 { color: rgb(248, 250, 252); font-size: 1.1rem; font-weight: 950; margin: 0.25rem 0 0; } .tile:hover { transform: translateY(-3px) scale(1.03); } .tile span { background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 5px; box-shadow: 0 2px 7px rgba(2, 6, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.76); box-sizing: border-box; color: var(--tile-text); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.78rem; font-weight: 900; left: 50%; line-height: 1.05; max-width: 62%; max-height: 3.35em; overflow-wrap: normal; overflow: hidden; padding: 0.1rem 0.18rem; position: absolute; text-align: center; top: 42%; --tile-text-transform: translate(-50%, -50%); transform: var(--tile-text-transform); -webkit-text-stroke: 0.25px rgba(255, 255, 255, 0.48); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72); white-space: normal; word-break: normal; z-index: 2; } .tile-player span { overflow-wrap: normal; text-wrap: balance; word-break: keep-all; } .tile span.tile-text-empty { font-size: 1rem; } .tile span.tile-text-short { font-size: 0.86rem; } .tile span.tile-text-medium { font-size: 0.72rem; } .tile span.tile-text-long { font-size: 0.58rem; line-height: 0.98; max-width: 76%; } .tile span.tile-text-xl { font-size: 0.46rem; line-height: 0.92; max-width: 82%; overflow-wrap: normal; } .tile small { background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 999px; color: var(--tile-text); display: block; font-size: 0.74rem; font-weight: 900; left: 50%; line-height: 1; margin-top: 0.12rem; padding: 0.08rem 0.24rem; position: absolute; top: 57%; --tile-text-transform: translateX(-50%); transform: var(--tile-text-transform); z-index: 2; } .tile-correct { --paddle-filter: grayscale(0.28) saturate(1.05) brightness(0.98); --paddle-glow: rgba(34, 197, 94, 0.55); --paddle-overlay: rgb(34, 197, 94); --paddle-overlay-opacity: 0.56; color: rgb(2, 44, 34); } .tile-wrong { --paddle-filter: grayscale(0.28) saturate(1.05) brightness(0.98); --paddle-glow: rgba(244, 63, 94, 0.52); --paddle-overlay: rgb(244, 63, 94); --paddle-overlay-opacity: 0.58; color: rgb(76, 5, 25); } .tile-age { --paddle-filter: grayscale(0.28) saturate(1.05) brightness(1.02); --paddle-glow: rgba(14, 165, 233, 0.55); --paddle-overlay: rgb(14, 165, 233); --paddle-overlay-opacity: 0.58; color: rgb(8, 47, 73); } .tile-age-correct { --paddle-filter: grayscale(0.28) saturate(1.05) brightness(0.98); --paddle-glow: rgba(34, 197, 94, 0.55); --paddle-overlay: rgb(34, 197, 94); --paddle-overlay-opacity: 0.56; } .tile-empty { --paddle-filter: grayscale(0.32) saturate(0.85) brightness(1.22) contrast(1.05); --paddle-glow: rgba(253, 224, 71, 0.45); --paddle-overlay: rgb(253, 224, 71); --paddle-overlay-opacity: 0.1; --tile-text: rgb(226, 232, 240); color: rgb(148, 163, 184); } /* Resalta la raqueta (originalmente oscura) cuando la casilla aún no se ha descubierto, con un brillo dorado para que destaque sobre el fondo. */ .tile-empty::before { filter: var(--paddle-filter) drop-shadow(0 0 9px var(--paddle-glow)) drop-shadow(0 6px 12px rgba(2, 6, 23, 0.4)); } .guess-row-new { animation: rowSettle 420ms ease-out both; } .guess-row-new .tile { animation: none; } .guess-row-new .tile::before { animation: paddleReveal 620ms cubic-bezier(0.2, 0.8, 0.22, 1.15) both; animation-delay: calc(var(--tile-index, 0) * 95ms); } .guess-row-new .tile::after { animation: paddleOverlayReveal 620ms cubic-bezier(0.2, 0.8, 0.22, 1.15) both; animation-delay: calc(var(--tile-index, 0) * 95ms); } .guess-row-new .tile span, .guess-row-new .tile small { animation: tileTextReveal 360ms ease-out both; animation-delay: calc((var(--tile-index, 0) * 95ms) + 220ms); } .guess-row-new .tile-correct::after, .guess-row-new .tile-age-correct::after { animation-name: paddleOverlayReveal, successGlow; animation-duration: 620ms, 760ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.22, 1.15), ease-out; animation-fill-mode: both, both; animation-delay: calc(var(--tile-index, 0) * 95ms), calc(var(--tile-index, 0) * 95ms); } .guess-row-new .tile-wrong::after { animation-name: paddleOverlayReveal, missFlash; animation-duration: 620ms, 520ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.22, 1.15), ease-out; animation-fill-mode: both, both; animation-delay: calc(var(--tile-index, 0) * 95ms), calc(var(--tile-index, 0) * 95ms); } .guess-row-new .tile-age::after { animation-name: paddleOverlayReveal, ageGlow; animation-duration: 620ms, 760ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.22, 1.15), ease-out; animation-fill-mode: both, both; animation-delay: calc(var(--tile-index, 0) * 95ms), calc(var(--tile-index, 0) * 95ms); } .guess-row-new .tile-age-correct::after { animation-name: paddleOverlayReveal, successGlow; } .shake { animation: shake 340ms ease-in-out; } .suggestion-item { border-radius: 6px; color: rgb(226, 232, 240); cursor: pointer; font-size: 0.92rem; font-weight: 700; padding: 0.7rem 0.85rem; transition: background-color 140ms ease, color 140ms ease; } .suggestion-item:hover, .suggestion-item:focus { background: rgba(34, 211, 238, 0.14); color: rgb(255, 255, 255); outline: none; } /* Igual que .game-entry-overlay/.game-entry-backdrop: el fondo oscuro que bloquea el juego vive en un elemento APARTE (.result-backdrop) con z-index menor que el footer y los botones de la cabecera, para que ambos sigan siendo clicables aunque esta ventana esté abierta. .result-overlay ahora es solo el posicionador de la tarjeta: no bloquea nada por sí mismo. */ .result-overlay { align-items: center; display: flex; inset: 0; justify-content: center; padding: 24px; pointer-events: none; position: fixed; z-index: 320; } .result-overlay.hidden { display: none; } /* El modal de iniciar sesión/registro (site-actions.js) reutiliza la clase .result-overlay para su propio fondo, pero a diferencia del panel de resultado, aquí SÍ debe bloquear toda la página (es un formulario real, no tiene sentido dejar clicar el footer mientras escribes tu contraseña). Sin esto, el cambio de arriba (pointer-events:none) dejaba el modal completo -incluido el botón de cerrar- sin poder recibir ningún clic. */ .site-auth-overlay { background: rgba(2, 6, 23, 0.46); pointer-events: auto; } .result-backdrop { background: rgba(2, 6, 23, 0.46); inset: 0; pointer-events: auto; position: fixed; z-index: 4; } .result-backdrop.hidden { display: none; } .result-alert { animation: resultIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both; background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 25, 0.98)), radial-gradient(circle at 92% 8%, rgba(253, 224, 71, 0.18), transparent 24%); border: 1px solid rgba(251, 191, 36, 0.36); border-radius: 8px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 36px rgba(245, 158, 11, 0.12); max-width: 360px; padding: 26px 22px 22px; pointer-events: auto; position: relative; text-align: center; width: min(100%, 360px); } .profile-alert { max-height: min(82vh, 760px); max-width: 420px; overflow-y: auto; padding: 1.5rem; position: relative; width: min(100%, 420px); } .profile-alert p { color: rgb(203, 213, 225); font-size: 0.88rem; line-height: 1.35; margin: 0.5rem 0 1rem; } .auth-tabs { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0.75rem 0 1rem; padding: 4px; } .auth-tab { background: transparent; border: 0; border-radius: 999px; color: rgb(203, 213, 225); cursor: pointer; font-size: 0.8rem; font-weight: 950; line-height: 1.12; min-height: 40px; overflow-wrap: anywhere; padding: 0.65rem 0.5rem; white-space: normal; } .auth-tab-active { background: rgb(245, 158, 11); color: rgb(17, 24, 39); } .google-custom-button { align-items: center; background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71)); border: 0; border-radius: 8px; color: rgb(17, 24, 39); cursor: pointer; display: flex; font-size: 0.94rem; font-weight: 950; gap: 0.6rem; justify-content: center; min-height: 46px; padding: 0.7rem 1rem; transition: filter 180ms ease; width: 100%; } .google-custom-button:disabled { cursor: default; opacity: 0.6; } .google-custom-button:hover:not(:disabled) { filter: brightness(1.06); } .auth-divider { align-items: center; color: rgb(148, 163, 184); display: flex; font-size: 0.75rem; gap: 0.6rem; margin: 0.9rem 0; text-transform: uppercase; } .auth-divider::before, .auth-divider::after { background: rgba(255, 255, 255, 0.14); content: ""; flex: 1; height: 1px; } .auth-form { margin: 0; } .profile-alert label:not(.consent-row) { color: rgb(226, 232, 240); display: block; font-size: 0.78rem; font-weight: 900; margin: 0.8rem 0 0.35rem; } .profile-alert input[type="text"], .profile-alert input[type="email"], .profile-alert input[type="password"], .profile-alert input:not([type]) { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; color: rgb(15, 23, 42); font-size: 1rem; outline: none; padding: 0.76rem 0.85rem; width: 100%; } .consent-row { align-items: flex-start; color: rgb(203, 213, 225); display: flex; gap: 0.55rem; font-size: 0.78rem; font-weight: 700; line-height: 1.3; margin: 0.95rem 0; } .consent-row input { accent-color: rgb(245, 158, 11); margin-top: 0.15rem; } .profile-save-button { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71)); border: 0; border-radius: 8px; color: rgb(17, 24, 39); cursor: pointer; font-size: 0.94rem; font-weight: 950; line-height: 1.15; margin-top: 1rem; min-height: 46px; overflow-wrap: anywhere; padding: 0.9rem 1rem; white-space: normal; width: 100%; } .profile-status { color: rgb(253, 230, 138) !important; font-weight: 900; line-height: 1.35; min-height: 1.2rem; overflow-wrap: anywhere; } .profile-status a { color: rgb(255, 255, 255); display: inline-block; font-size: 0.78rem; font-weight: 800; margin-top: 0.3rem; text-decoration: underline; } .alert-close-button { align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; color: rgb(226, 232, 240); cursor: pointer; display: flex; font-size: 1.18rem; font-weight: 900; height: 30px; justify-content: center; line-height: 1; position: absolute; right: 10px; top: 10px; transition: background-color 160ms ease, transform 160ms ease; width: 30px; } .alert-close-button:hover { background: rgba(251, 191, 36, 0.18); transform: scale(1.04); } .copy-pop { animation: copyPop 420ms ease-out both; } .win-celebration { inset: 0; overflow: hidden; pointer-events: auto; position: fixed; z-index: 500; } .win-celebration::before { animation: winBackdrop 700ms ease both; background: radial-gradient(circle at 50% 42%, rgba(253, 224, 71, 0.24), transparent 32%), rgba(2, 6, 23, 0.28); content: ""; inset: 0; position: absolute; } .win-burst { animation: winBurst 1350ms ease-out 540ms both; border: 2px solid rgba(253, 224, 71, 0.7); border-radius: 999px; height: 34vmin; left: 50%; position: absolute; top: 42%; transform: translate(-50%, -50%) scale(0.2); width: 34vmin; } .win-ball { align-items: center; animation: ballToScreen 1250ms cubic-bezier(0.16, 1, 0.3, 1) both; aspect-ratio: 1; background: url("../assets/padel-ball-real.png") center / cover no-repeat; border: 2px solid rgba(240, 255, 92, 0.62); border-radius: 999px; box-shadow: 0 0 34px rgba(190, 242, 100, 0.55), 0 28px 70px rgba(0, 0, 0, 0.5), inset 8px 8px 18px rgba(255, 255, 255, 0.22), inset -18px -20px 34px rgba(63, 98, 18, 0.28); color: rgb(26, 46, 5); display: flex; flex-direction: column; gap: 0.45rem; justify-content: center; left: var(--ball-start-x); padding: clamp(2.2rem, 6.2vmin, 4.2rem); position: fixed; text-align: center; top: var(--ball-start-y); transform: translate(-50%, -50%) scale(0.12); width: clamp(300px, 58vmin, 540px); } .win-close-button { align-items: center; animation: resultIn 360ms ease-out 820ms both; background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgb(248, 250, 252); cursor: pointer; display: flex; font-size: 1.35rem; font-weight: 950; height: 42px; justify-content: center; line-height: 1; position: absolute; right: -6px; top: -54px; transition: background-color 160ms ease, transform 160ms ease; width: 42px; z-index: 2; } .win-close-button:hover { background: rgba(251, 191, 36, 0.2); transform: scale(1.04); } .win-ball::before, .win-ball::after { background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.32), transparent 28%); content: ""; inset: 0; opacity: 0.8; position: absolute; } .win-ball::after { background: radial-gradient(circle at 67% 78%, rgba(39, 74, 0, 0.22), transparent 34%); opacity: 0.7; } .win-ball strong { background: rgba(238, 255, 183, 0.44); border: 1px solid rgba(56, 86, 6, 0.12); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32); backdrop-filter: blur(2px); display: block; font-size: clamp(1.08rem, 3.45vmin, 2.15rem); font-weight: 950; line-height: 1.02; max-width: 78%; padding: 0.65rem 0.8rem; position: relative; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42), 0 4px 12px rgba(56, 86, 6, 0.16); z-index: 1; } .win-ball span { background: rgba(238, 255, 183, 0.52); border: 1px solid rgba(26, 46, 5, 0.16); border-radius: 999px; display: inline-block; font-size: clamp(0.84rem, 2vmin, 1.12rem); font-weight: 950; line-height: 1.15; max-width: 74%; padding: 0.48rem 0.78rem; position: relative; z-index: 1; } .win-celebration-out { animation: celebrationFadeOut 700ms ease both; } @media (min-width: 420px) { :root { --players-right: -84px; --players-size: min(98vw, 550px); --players-top: 78px; } .tile { height: 64px; min-height: 64px; max-height: 64px; } } @media (min-width: 760px) { :root { --players-right: 42px; --players-size: clamp(360px, 36vw, 480px); --players-top: 104px; } .app-shell { max-width: min(100%, 980px); padding-left: calc(var(--nav-rail-w) + 1.5rem); padding-right: 1.5rem; } .play-layout { grid-template-columns: minmax(560px, 860px); justify-items: stretch; } .game-column { max-width: 860px; } body::after { opacity: 0.6; position: absolute; } .intro-panel { text-align: center; } .intro-panel > p { margin-left: auto; margin-right: auto; } .intro-panel > p[data-i18n="subtitle"] { line-height: 1.45; max-width: 42rem; } .intro-panel > p[data-i18n="eyebrow"] { max-width: none; } .title-lockup { max-width: min(82vw, 640px); } .padle-title-logo { width: min(100%, 640px); } .intro-panel { margin-bottom: 0.85rem; text-align: center; } .intro-panel > p { margin-top: 0.45rem; } .rules-panel { margin-bottom: 0.7rem; padding: 0.55rem; } .rules-panel > div > div { min-height: 30px; padding: 0.35rem 0.45rem; } .search-card { margin-bottom: 0.75rem; } .search-card label { margin-bottom: 0.35rem; } .search-input, .guess-button { padding-bottom: 0.58rem; padding-top: 0.58rem; } #attempts { gap: 0.38rem; } .tile { height: 98px; min-height: 98px; max-height: 98px; padding: 1.08rem 0.52rem 1.28rem; } .tile span { font-size: 0.95rem; } .tile span.tile-text-empty { font-size: 1.08rem; } .tile span.tile-text-short { font-size: 0.94rem; } .tile span.tile-text-medium { font-size: 0.78rem; } .tile span.tile-text-long { font-size: 0.62rem; max-width: 78%; } .tile span.tile-text-xl { font-size: 0.5rem; max-width: 84%; } .tile small { font-size: 0.78rem; } .attribute-header span { font-size: 0.66rem; } .guess-row, .attribute-header { gap: 4px; } .attribute-header { margin-bottom: 0.45rem; } } @media (min-width: 1040px) { :root { --players-right: 1rem; --players-size: clamp(360px, 27vw, 455px); --players-top: 92px; } .app-shell { max-width: min(100%, 1320px); padding-left: calc(var(--nav-rail-w) + 2rem); padding-right: 2rem; padding-top: 3.35rem; } .app-shell > .ad-slot:first-child { margin-bottom: 1.8rem; } .play-layout { align-items: start; grid-template-columns: minmax(620px, 960px); justify-content: center; } .game-column { max-width: 960px; } body::after { opacity: 0; } .intro-panel > p[data-i18n="eyebrow"] { font-size: 0.82rem; } .title-lockup { max-width: 680px; } .padle-title-logo { width: min(100%, 680px); } .intro-panel > p[data-i18n="subtitle"] { font-size: 1.05rem; max-width: 46rem; } .tile { height: 106px; min-height: 106px; max-height: 106px; --paddle-scale: 1.22; padding: 1.2rem 0.58rem 1.36rem; } .tile span { font-size: 1.05rem; max-width: 64%; } .tile span.tile-text-empty { font-size: 1.18rem; } .tile span.tile-text-short { font-size: 1rem; } .tile span.tile-text-medium { font-size: 0.84rem; } .tile span.tile-text-long { font-size: 0.66rem; max-width: 78%; } .tile span.tile-text-xl { font-size: 0.46rem; line-height: 0.92; max-width: 84%; } .tile small { font-size: 0.84rem; } } @media (max-width: 759px) { .app-shell { padding: 2.65rem 0.75rem 1.5rem 0.75rem; } body::after { background-position: center 7rem; background-size: min(112vw, 430px) auto; opacity: 0.08; } .brand-strip { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; overflow-x: visible; padding-bottom: 0.1rem; scrollbar-width: auto; white-space: nowrap; width: 100%; } .brand-strip::-webkit-scrollbar { display: none; } .brand-mark { align-items: center; display: flex; flex: 0 0 auto; font-size: clamp(0.55rem, 2vw, 0.64rem); justify-content: center; min-height: 36px; padding: 0.5rem 0.65rem; white-space: nowrap; } .header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; min-width: 0; overflow: visible; width: 100%; } .header-share-button, .profile-button, .logout-button { flex: 0 0 auto; line-height: 1.12; max-width: none; min-height: 36px; padding: 0.55rem 0.75rem; white-space: nowrap; } .language-switch { flex: 0 0 auto; justify-content: flex-start; width: auto; } .language-button { flex: 0 0 auto; } .title-lockup { aspect-ratio: 2.55 / 1; margin-top: 0; max-width: none; width: min(100%, 430px); } .padle-title-logo { filter: brightness(1.08) contrast(1.08) saturate(1.04) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(253, 224, 71, 0.18)); transform: translateY(-55%) scale(1.04); width: 96%; } .title-lockup::before { filter: blur(14px); inset: 48% 8% 9%; opacity: 0.78; } .rules-panel > div { gap: 0.28rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .rules-panel > div > div { font-size: clamp(0.58rem, 2.35vw, 0.68rem); min-height: 30px; padding: 0.32rem 0.24rem; } .search-card > div { align-items: stretch; } .guess-button { padding-left: 0.75rem; padding-right: 0.75rem; } .attribute-header { display: grid !important; gap: 3px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 0.42rem; } .attribute-header span { font-size: clamp(0.43rem, 1.9vw, 0.56rem); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #attempts { gap: 0.38rem; } .guess-row { gap: 3px; grid-template-columns: repeat(6, minmax(0, 1fr)); } .tile { align-items: center; justify-content: center; --paddle-scale: 1.16; height: 74px; min-height: 74px; max-height: 74px; padding: 0.78rem 0.12rem 0.9rem; } .tile::before, .tile::after { inset: 0; } .tile span { font-size: 0.62rem; line-height: 1.1; max-height: none; max-width: 90%; overflow: visible; padding: 0.25rem 0.15rem; top: 42%; width: 90%; word-break: normal; } .tile span.tile-text-empty { font-size: 0.68rem; } .tile span.tile-text-short { font-size: 0.58rem; } .tile span.tile-text-medium { font-size: 0.52rem; } .tile span.tile-text-long { font-size: 0.3rem; line-height: 0.96; max-width: 84%; } .tile span.tile-text-xl { font-size: 0.22rem; line-height: 0.92; max-width: 88%; } .tile small { font-size: 0.58rem; margin-top: 0.08rem; padding: 0.05rem 0.16rem; } .tile-age { gap: 0; } .tile-age small { line-height: 1; margin-top: 0; } } @media (min-width: 640px) and (max-width: 1039px) { .app-shell > .ad-slot:first-child { margin-bottom: 1.8rem; } .play-layout { align-items: start; gap: 1.4rem; grid-template-columns: minmax(360px, 1fr); justify-content: center; } body::after { opacity: 0; } } @media (min-width: 640px) { .intro-panel { animation: none; transform: none; } .intro-panel .brand-strip { margin: 0; position: fixed; right: 1rem; top: max(0.8rem, env(safe-area-inset-top)); width: auto; z-index: 120; } .header-actions { flex-wrap: nowrap; gap: 7px; justify-content: flex-end; overflow: visible; width: auto; } .header-share-button, .profile-button, .logout-button { flex: 0 0 auto; max-width: none; min-height: 32px; padding: 7px 10px; white-space: nowrap; } .language-button { flex: 0 0 auto; padding: 7px 9px; } } @media (min-width: 900px) { .intro-panel .brand-strip { top: max(0.8rem, env(safe-area-inset-top)); } } /* Reutilizable para minijuegos: acciones arriba a la derecha */ .game-actions-slot { position: fixed; right: clamp(0.72rem, 2vw, 1.2rem); top: max(0.72rem, env(safe-area-inset-top)); z-index: 120; } .game-actions-slot .header-actions { justify-content: flex-end; } .app-shell, .racket-shell, .venue-shell, .memory-shell { position: relative; } /* La cortina oscura de fondo vive en un elemento aparte (.game-entry-backdrop, ver más abajo) con un z-index MENOR que el del footer (5). Así, cuando se hace scroll hasta el pie de página, el footer queda por encima de la cortina y sigue siendo clicable, mientras que la tarjeta (.game-entry-card, dentro de este overlay a z-index 190) sigue viéndose por delante de él. */ .game-entry-overlay { background: transparent; inset: 0; padding: 1rem; pointer-events: none; position: fixed; z-index: 190; } .game-entry-backdrop { background: rgba(2, 6, 23, 0.55); inset: 0; pointer-events: auto; position: fixed; z-index: 4; } .game-entry-backdrop.hidden { display: none; } .game-entry-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 25, 0.96)), radial-gradient(circle at 85% 10%, rgba(253, 224, 71, 0.16), transparent 28%); border: 1px solid rgba(253, 224, 71, 0.28); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); max-width: 420px; max-height: calc(100svh - 2rem); overflow: auto; padding: clamp(1.1rem, 3vw, 1.7rem); pointer-events: auto; position: absolute; text-align: center; left: 50%; top: min(50svh, 50%); transform: translate(-50%, -50%); width: min(100%, 420px); z-index: 1; } .game-entry-eyebrow { color: rgb(253, 230, 138); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.16em; margin: 0 0 0.55rem; text-transform: uppercase; } .game-entry-card h2 { color: rgb(248, 250, 252); font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 950; line-height: 1.05; margin: 0; } .game-entry-text { color: rgb(203, 213, 225); font-size: 0.95rem; font-weight: 650; line-height: 1.45; margin: 0.85rem 0 1.1rem; } .game-entry-countdown { color: rgb(251, 191, 36); margin: 1rem 0 0; } .daily-result-countdown, .memory-countdown, .venue-countdown-card, .venue-modal-countdown { display: block; } /* ===== Footer global (Actualizado para diseño multi-columna) ===== */ .global-site-footer { background: rgba(4, 8, 16, 0.95); /* Ligeramente más opaco para mejor lectura */ border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgb(185, 196, 213); font-family: 'Inter', 'Roboto', sans-serif; /* Las fuentes que analizamos */ font-size: 0.88rem; margin-top: 5rem; padding: 3rem clamp(1rem, 5vw, 2rem) 1.5rem; position: relative; z-index: 5; } /* Contenedor Grid Principal */ .global-site-footer .footer-main-content { display: grid; /* 1 columna principal más ancha (1.5fr) y 4 columnas iguales (1fr) */ grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; margin: 0 auto; max-width: 1250px; /* Ampliado un poco para dar respiro a las 5 columnas */ padding-bottom: 2.5rem; } /* --- Columna 1: Brand (Logo, Trustpilot, Redes) --- */ .global-site-footer .footer-logo { display: block; height: auto; margin-bottom: 1.5rem; max-width: 180px; } .global-site-footer .footer-rating { margin-bottom: 1.8rem; } .global-site-footer .rating-stars { color: #00b67a; /* Verde característico de Trustpilot */ font-size: 1.6rem; letter-spacing: 2px; margin-bottom: 0.2rem; } .global-site-footer .rating-text { font-size: 0.8rem; margin: 0; } .global-site-footer .social-title { color: #ffffff; font-size: 0.9rem; font-weight: 600; margin: 0 0 0.8rem 0; } .global-site-footer .footer-social-icons { display: flex; gap: 1rem; } .global-site-footer .footer-social-icons a { color: #ffffff; display: inline-flex; transition: color 180ms ease, transform 180ms ease; } .global-site-footer .footer-social-icons a:hover { color: rgb(253, 224, 71); transform: translateY(-2px); } /* --- Columnas 2, 3 y 4: Navegación --- */ .global-site-footer .footer-heading { color: #ffffff; font-size: 1rem; font-weight: 600; margin: 0 0 1.2rem 0; } .global-site-footer .footer-nav { display: flex; flex-direction: column; gap: 0.85rem; } .global-site-footer .footer-nav a { color: rgb(185, 196, 213); font-size: 0.85rem; text-decoration: none; transition: color 180ms ease; } .global-site-footer .footer-nav a:hover { color: rgb(253, 224, 71); } /* --- Columna 5: Badges de Apps --- */ .global-site-footer .app-badges { display: flex; flex-direction: column; gap: 0.8rem; } .global-site-footer .app-badges img { border-radius: 6px; height: auto; max-width: 135px; } /* --- Copyright Bottom --- */ .global-site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(185, 196, 213, 0.5); font-size: 0.8rem; margin: 0 auto; max-width: 1250px; padding-top: 1.5rem; text-align: center; } .global-site-footer .footer-bottom p { margin: 0; } .global-site-footer .footer-cookie-settings { color: rgba(185, 196, 213, 0.6); display: inline-block; font-size: 0.78rem; margin-top: 0.4rem; text-decoration: underline; } .global-site-footer .footer-cookie-settings:hover { color: rgb(253, 224, 71); } /* ===== Responsive Design ===== */ /* Tablets (landscape) */ @media (max-width: 1024px) { .global-site-footer .footer-main-content { grid-template-columns: repeat(3, 1fr); } /* Hacemos que el logo y redes ocupen toda la fila superior en tablets */ .global-site-footer .brand-col { align-items: center; display: flex; flex-direction: column; grid-column: span 3; text-align: center; } } /* Tablets (portrait) & Móviles grandes */ @media (max-width: 768px) { .global-site-footer .footer-main-content { grid-template-columns: repeat(2, 1fr); } .global-site-footer .brand-col { grid-column: span 2; } } /* Móviles pequeños */ @media (max-width: 520px) { .global-site-footer .footer-main-content { gap: 2.5rem; grid-template-columns: 1fr; text-align: center; } .global-site-footer .brand-col { grid-column: span 1; } .global-site-footer .footer-social-icons { justify-content: center; } .global-site-footer .app-badges { align-items: center; } } @media (max-width: 420px) { .game-entry-overlay { padding: 0.75rem; } .game-entry-card { border-radius: 12px; padding: 1rem; width: min(100%, 360px); } } /* Evita que los botones superiores tapen la X del modal de perfil */ body.profile-panel-open .intro-panel .brand-strip { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } } @keyframes appEnter { from { opacity: 0; } to { opacity: 1; } } @keyframes topActionIn { from { opacity: 0; transform: translateY(-7px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes languageSwap { 0% { filter: blur(1px); opacity: 0.78; } 100% { filter: blur(0); opacity: 1; } } @keyframes ballToScreen { 0% { filter: blur(0); opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-28deg); } 16% { opacity: 1; } 58% { filter: blur(0); transform: translate(calc(50vw - var(--ball-start-x)), calc(50vh - var(--ball-start-y))) translate(-50%, -50%) scale(1.08) rotate(8deg); } 72% { transform: translate(calc(50vw - var(--ball-start-x)), calc(50vh - var(--ball-start-y))) translate(-50%, -50%) scale(0.98) rotate(0deg); } 100% { transform: translate(calc(50vw - var(--ball-start-x)), calc(50vh - var(--ball-start-y))) translate(-50%, -50%) scale(1) rotate(0deg); } } @keyframes winBurst { from { opacity: 0.95; transform: translate(-50%, -50%) scale(0.08); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } @keyframes winBackdrop { 0% { opacity: 0; } 18%, 86% { opacity: 1; } 100% { opacity: 0.72; } } @keyframes celebrationFadeOut { to { opacity: 0; } } @keyframes floatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes courtDrift { from { transform: translateY(0); } to { transform: translateY(42px); } } @keyframes goldDrift { from { background-position: 0 0, 72px 18px, 34px 90px, 0 0, 0 0, 0 0, 0 0; } to { background-position: 34px 54px, 16px 92px, 88px 18px, 0 42px, 0 42px, 0 0, 0 0; } } @keyframes shavingFall { 0% { opacity: 0; transform: translate3d(-4vw, -12vh, 0) rotate(var(--angle)); } 12% { opacity: 0.8; } 78% { opacity: 0.62; } 100% { opacity: 0; transform: translate3d(12vw, 118vh, 0) rotate(calc(var(--angle) + 90deg)); } } @keyframes adPulse { 0%, 100% { border-color: rgba(203, 213, 225, 0.34); } 50% { border-color: rgba(245, 158, 11, 0.56); } } @keyframes readyPulse { 0%, 100% { box-shadow: 0 0 0 rgba(34, 211, 238, 0); } 50% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.34); } } @keyframes suggestionsIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rowSettle { from { transform: translateY(8px); } to { transform: translateY(0); } } @keyframes paddleReveal { 0% { filter: brightness(1.4); opacity: 0; transform: rotate(-5deg) rotateX(78deg) scale(0.92); } 52% { opacity: 1; transform: rotate(-5deg) rotateX(-10deg) scale(calc(var(--paddle-scale) * 1.04)); } 100% { filter: var(--paddle-filter) drop-shadow(0 8px 12px rgba(2, 6, 23, 0.34)); opacity: 1; transform: rotate(-5deg) rotateX(0) scale(var(--paddle-scale)); } } @keyframes paddleOverlayReveal { 0% { opacity: 0; transform: rotate(-5deg) rotateX(78deg) scale(0.92); } 52% { opacity: var(--paddle-overlay-opacity); transform: rotate(-5deg) rotateX(-10deg) scale(calc(var(--paddle-scale) * 1.04)); } 100% { opacity: var(--paddle-overlay-opacity); transform: rotate(-5deg) rotateX(0) scale(var(--paddle-scale)); } } @keyframes tileTextReveal { from { opacity: 0; transform: var(--tile-text-transform) translateY(2px) scale(0.96); } to { opacity: 1; transform: var(--tile-text-transform) translateY(0) scale(1); } } @keyframes successGlow { 0%, 55% { filter: brightness(1.08) drop-shadow(0 0 0 rgba(16, 185, 129, 0)); } 80% { filter: brightness(1.08) drop-shadow(0 0 24px rgba(16, 185, 129, 0.72)); } 100% { filter: brightness(1) drop-shadow(0 10px 18px rgba(16, 185, 129, 0.28)); } } @keyframes missFlash { 0%, 55%, 100% { filter: brightness(1) drop-shadow(0 10px 18px rgba(244, 63, 94, 0.22)); } 72% { filter: brightness(1.08) drop-shadow(0 0 22px rgba(244, 63, 94, 0.68)); } } @keyframes ageGlow { 0%, 55% { filter: brightness(1.08) drop-shadow(0 0 0 rgba(14, 165, 233, 0)); } 80% { filter: brightness(1.08) drop-shadow(0 0 22px rgba(14, 165, 233, 0.64)); } 100% { filter: brightness(1) drop-shadow(0 10px 18px rgba(14, 165, 233, 0.24)); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @keyframes resultIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes shareBeat { 0%, 100% { box-shadow: 0 14px 32px rgba(6, 78, 59, 0.34); transform: translateY(0); } 50% { box-shadow: 0 18px 40px rgba(16, 185, 129, 0.32); transform: translateY(-1px); } } @keyframes copyPop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes homeBackgroundDrift { from { background-position: 0 0, 48% 30%, 74% 70%, 0 0, 0 0; transform: scale(1.04) translate3d(-1.2%, -0.8%, 0); } to { background-position: 0 0, 52% 34%, 68% 62%, 110px 70px, 0 0; transform: scale(1.09) translate3d(1.2%, 0.8%, 0); } } @keyframes homeCourtPulse { from { opacity: 0.46; transform: translate(-50%, -39%) perspective(760px) rotateX(62deg) rotateZ(-10deg) scale(0.98); } to { opacity: 0.72; transform: translate(-50%, -42%) perspective(760px) rotateX(62deg) rotateZ(-8deg) scale(1.04); } } @keyframes homeRacketSweep { 0%, 100% { opacity: 0.1; transform: translate3d(0, 0, 0) rotate(-28deg) scale(1); } 50% { opacity: 0.17; transform: translate3d(-4vw, 5vh, 0) rotate(-20deg) scale(1.06); } } @keyframes homeLineSlide { from { transform: translateX(-12vw) rotate(-12deg); } to { transform: translateX(12vw) rotate(-12deg); } } @keyframes homeBallArc { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.88) rotate(0deg); } 50% { transform: translate3d(54vw, 22vh, 0) scale(1.08) rotate(185deg); } } @keyframes homeBallArcTwo { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.74) rotate(0deg); } 50% { transform: translate3d(-48vw, -18vh, 0) scale(1) rotate(-145deg); } } @keyframes homeHeroIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================= SIDEBAR NAVBAR ============================================= */ :root { --nav-rail-w: 52px; --nav-panel-w: 310px; } .side-nav { height: 100vh; left: 0; position: fixed; top: 0; width: var(--nav-rail-w); z-index: 200; } /* Hover trigger zone — expands the clickable area */ .side-nav:hover { width: calc(var(--nav-rail-w) + var(--nav-panel-w)); } .side-nav-rail { align-items: center; background: rgba(4, 6, 18, 0.82); backdrop-filter: blur(20px); border-right: 1px solid rgba(245, 158, 11, 0.16); display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 18px 0; position: relative; width: var(--nav-rail-w); z-index: 2; box-shadow: 2px 0 24px rgba(0,0,0,0.32); } .side-nav-home-link { align-items: center; border-radius: 8px; display: flex; height: 38px; justify-content: center; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease; width: 38px; position: relative; } .side-nav-home-link::before { background: radial-gradient(circle, rgba(253, 224, 71, 0.3), rgba(245, 158, 11, 0.12) 44%, transparent 70%); border-radius: 999px; content: ""; filter: blur(10px); inset: 0; opacity: 0.7; position: absolute; transform: scale(0.9); transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease; } .side-nav-home-link:hover { background: rgba(245, 158, 11, 0.08); transform: translateY(-1px); } .side-nav-home-link:hover::before, .side-nav:hover .side-nav-home-link::before { filter: blur(14px); opacity: 0.95; transform: scale(1.08); } /* Racket icon replacing old PaDLE text logo */ .side-nav-racket-icon { background: url("../assets/web-favicon.png") center / contain no-repeat; display: block; filter: none; height: 32px; position: relative; width: 32px; z-index: 1; transition: filter 220ms ease, transform 220ms ease; } .side-nav:hover .side-nav-racket-icon { filter: brightness(1.08); transform: rotate(-7deg) scale(1.1); } .side-nav-toggle { align-items: center; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.26); border-radius: 8px; color: rgb(253, 230, 138); cursor: pointer; display: none; height: 40px; justify-content: center; width: 40px; } .side-nav-toggle span, .side-nav-toggle span::before, .side-nav-toggle span::after { background: currentColor; border-radius: 999px; content: ""; display: block; height: 2px; transition: opacity 180ms ease, transform 180ms ease; width: 18px; } .side-nav-toggle span { position: relative; } .side-nav-toggle span::before, .side-nav-toggle span::after { left: 0; position: absolute; } .side-nav-toggle span::before { top: -6px; } .side-nav-toggle span::after { top: 6px; } .side-nav-open .side-nav-toggle span { transform: rotate(45deg); } .side-nav-open .side-nav-toggle span::before { opacity: 0; } .side-nav-open .side-nav-toggle span::after { transform: translateY(-6px) rotate(90deg); } .side-nav-icons { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .side-nav-icon-dot { background: rgba(148, 163, 184, 0.35); border-radius: 999px; display: block; height: 5px; transition: background-color 200ms ease, transform 200ms ease; width: 5px; } .side-nav-icon-dot.active-dot { background: rgb(245, 158, 11); transform: scale(1.3); } .side-nav-panel { background: linear-gradient(145deg, rgba(6, 9, 24, 0.97), rgba(4, 6, 18, 0.99)), radial-gradient(circle at 90% 10%, rgba(245, 158, 11, 0.12), transparent 40%); backdrop-filter: blur(24px); border-right: 1px solid rgba(245, 158, 11, 0.2); box-shadow: 4px 0 32px rgba(0,0,0,0.4); display: flex; flex-direction: column; height: 100%; left: 0; padding: 18px 0 18px; position: absolute; top: 0; pointer-events: none; transform: translateX(-110%); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease; opacity: 0; width: calc(var(--nav-rail-w) + var(--nav-panel-w)); z-index: 1; } /* Open panel purely on hover — no JS click needed */ .side-nav:hover .side-nav-panel { transform: translateX(0); opacity: 1; pointer-events: auto; } .side-nav-panel-header { padding: 12px 20px 12px 72px; } .snp-eyebrow { color: rgb(245, 158, 11); display: block; font-size: 0.65rem; font-weight: 950; letter-spacing: 0.2em; text-transform: uppercase; } .snp-title { color: rgb(248, 250, 252); font-size: 1.18rem; font-weight: 950; margin: 0.2rem 0 0; } .side-nav-games { display: flex; flex: 1; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0 10px 0 62px; } .side-nav-section-title { color: rgb(245, 158, 11); font-size: 0.65rem; font-weight: 950; letter-spacing: 0.2em; margin: 0.72rem 10px 0.2rem; text-transform: uppercase; } .side-nav-section-title:first-child { margin-top: 0; } .side-nav-game { align-items: center; border: 1px solid transparent; border-radius: 12px; cursor: pointer; display: grid; gap: 4px 12px; grid-template-columns: 36px minmax(0, 1fr) max-content; padding: 10px 12px; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .side-nav-game:hover { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); transform: translateX(3px); } .active-game { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.28); } .coming-soon { opacity: 0.55; pointer-events: auto; cursor: default; } .coming-soon:hover { transform: none; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .sng-icon { align-items: center; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.22); border-radius: 9px; color: rgb(253, 224, 71); display: flex; flex-shrink: 0; grid-column: 1; grid-row: 1 / span 2; height: 36px; justify-content: center; width: 36px; } .sng-icon svg { display: block; height: 22px; width: 22px; } .sng-icon-ball { background: rgba(14, 165, 233, 0.14); border-color: rgba(14, 165, 233, 0.22); color: rgb(125, 211, 252); } .sng-icon-section { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.22); color: rgb(134, 239, 172); } .sng-icon-racket { background: url("../assets/web-favicon.png") center / 20px no-repeat; display: block; height: 22px; width: 22px; } .sng-info { display: flex; flex: 1; flex-direction: column; grid-column: 2; grid-row: 1 / span 2; min-width: 0; } .sng-info strong { color: rgb(248, 250, 252); font-size: 0.86rem; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sng-info small { color: rgb(148, 163, 184); font-size: 0.72rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sng-badge { align-self: start; background: rgb(245, 158, 11); border-radius: 999px; color: rgb(17, 24, 39); font-size: 0.58rem; font-weight: 950; grid-column: 3; grid-row: 1; justify-self: end; letter-spacing: 0.06em; padding: 3px 7px; text-transform: uppercase; white-space: nowrap; } .sng-badge-soon { background: rgba(148, 163, 184, 0.18); color: rgb(148, 163, 184); } .side-nav-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); color: rgba(148, 163, 184, 0.5); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; margin-top: auto; padding: 14px 20px 0 72px; text-transform: uppercase; } @media (max-width: 639px) { :root { --nav-rail-w: 0px; --nav-panel-w: 0px; } .site-language-switch { right: 4.15rem; top: max(0.78rem, env(safe-area-inset-top)); z-index: 300; } .site-language-switch .language-button { min-height: 34px; padding: 7px 9px; } .side-nav { height: auto; left: 0; right: 0; top: 0; width: 100%; z-index: 260; } .side-nav:hover { width: 100%; } .side-nav-rail { align-items: center; background: rgba(4, 6, 18, 0.86); border-bottom: 1px solid rgba(245, 158, 11, 0.18); border-right: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34); flex-direction: row; height: 64px; justify-content: space-between; padding: 0.7rem 0.85rem; width: 100%; } .side-nav-home-link { height: 42px; width: 42px; } .side-nav-racket-icon { height: 34px; width: 34px; } .side-nav:hover .side-nav-racket-icon { filter: none; transform: none; } .side-nav-toggle { display: flex; } .side-nav-icons { display: none; } .side-nav-panel { border-bottom: 1px solid rgba(245, 158, 11, 0.2); border-right: 0; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5); height: auto; left: 0; max-height: calc(100vh - 64px); overflow-y: auto; padding: 0.9rem 0.85rem 1rem; position: absolute; right: 0; top: 64px; transform: translateY(-120%); width: 100%; } .side-nav:hover .side-nav-panel { opacity: 0; pointer-events: none; transform: translateY(-120%); } .side-nav.side-nav-open .side-nav-panel, .side-nav.side-nav-open:hover .side-nav-panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .side-nav-panel-header { padding: 0.25rem 0.25rem 0.65rem; } .side-nav-games { flex: 0 0 auto; gap: 0.45rem; padding: 0; } .side-nav-section-title { margin-left: 0.25rem; margin-right: 0.25rem; } .side-nav-game { border-radius: 8px; grid-template-columns: 40px minmax(0, 1fr); min-height: 58px; padding: 0.65rem 0.75rem; } .sng-icon { grid-row: 1 / span 2; height: 40px; width: 40px; } .sng-info { grid-column: 2; grid-row: 1; } .sng-info small { white-space: normal; } .sng-badge { grid-column: 2; grid-row: 2; justify-self: start; white-space: normal; } .side-nav-footer { margin-top: 0.75rem; padding: 0.85rem 0.25rem 0; } .app-shell { padding-top: 5.4rem; } } @keyframes sideNavIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } /* ============================================= MOBILE IMPROVEMENTS & EXTRA RESPONSIVE ============================================= */ /* Ensure tiles display well on very small screens */ @media (max-width: 380px) { .tile span { font-size: 0.48rem; padding: 0.05rem 0.08rem; } .tile span.tile-text-short { font-size: 0.54rem; } .tile span.tile-text-medium { font-size: 0.48rem; } .tile span.tile-text-long { font-size: 0.34rem; } .tile span.tile-text-xl { font-size: 0.28rem; } .attribute-header span { font-size: 0.38rem; } .tile { height: 66px; max-height: 66px; min-height: 66px; padding: 0.7rem 0.06rem 0.82rem; } .intro-panel > p[data-i18n="eyebrow"] { font-size: 0.6rem; } .title-lockup { max-width: none; width: min(96vw, 340px); } .padle-title-logo { transform: translateY(-55%) scale(1.03); width: 96%; } .app-shell { padding: 1.75rem 0.5rem 1.5rem; } } /* Fix profile panel on small screens */ @media (max-width: 480px) { .profile-alert { padding: 1.1rem; max-height: 92vh; } .profile-alert h2 { font-size: 1rem; padding-right: 2rem; } .result-overlay { padding: 12px; } .result-alert { padding: 20px 16px 18px; } .win-ball { width: clamp(260px, 82vmin, 400px); padding: clamp(1.8rem, 5vmin, 3.2rem); } .win-ball strong { font-size: clamp(0.9rem, 3vmin, 1.6rem); } } /* Improved header action buttons on small mobile */ @media (max-width: 400px) { .header-share-button, .profile-button, .logout-button { font-size: 0.65rem; padding: 7px 8px; } .language-button { font-size: 0.65rem; padding: 7px 8px; } } @media (max-width: 759px) { .padle-subtitle { font-size: 1rem; margin-top: 0.05rem !important; max-width: min(86vw, 21rem); padding-left: 0.35rem; padding-right: 0.35rem; } .tile { --paddle-scale: 1.17; height: 86px; max-height: 86px; min-height: 86px; padding: 0; } .tile span { font-size: 0.62rem; line-height: 1.1; max-height: none; max-width: 90%; overflow: visible; padding: 0.25rem 0.15rem; top: 42%; width: 90%; word-break: normal; } .tile-player span { font-size: 0.58rem; max-width: 130%; white-space: normal; width: 130%; word-break: normal; } .tile-player span.tile-text-medium, .tile-player span.tile-text-long, .tile-player span.tile-text-xl { font-size: clamp(0.38rem, 1.85vw, 0.49rem); line-height: 1.02; max-width: 124%; overflow-wrap: normal; width: min(5.6rem, 124%); } .tile-gender span, .tile-side span, .tile-age span { font-size: 0.55rem; max-width: 74%; white-space: nowrap; width: auto; } .tile-racket span { font-size: 0.48rem; line-height: 0.98; max-height: 3.05em; max-width: 72%; overflow-wrap: normal; white-space: normal; width: min(4.55rem, 72%); word-break: normal; } .tile span.tile-text-empty { font-size: 0.78rem; width: auto; } .tile span.tile-text-short { font-size: 0.62rem; } .tile span.tile-text-medium { font-size: 0.55rem; } .tile span.tile-text-long { font-size: 0.44rem; line-height: 0.98; max-height: 3.8em; max-width: 74%; overflow-wrap: anywhere; width: min(4.9rem, 74%); } .tile span.tile-text-xl { font-size: 0.35rem; line-height: 0.96; max-height: 4em; max-width: 78%; overflow-wrap: anywhere; width: min(5rem, 78%); } .tile-racket span.tile-text-medium, .tile-racket span.tile-text-long { font-size: 0.43rem; max-height: 3.2em; max-width: 76%; overflow-wrap: normal; width: min(4.85rem, 76%); } .tile small { font-size: 0.58rem; padding: 0.05rem 0.16rem; } } @media (min-width: 760px) { .padle-subtitle { font-size: 1.16rem; margin-top: 0.05rem !important; } .tile span { top: 38%; } .tile small { top: 53%; } } @media (max-width: 380px) { .padle-subtitle { font-size: 0.94rem; margin-top: 0.05rem !important; max-width: min(90vw, 20rem); } .tile { --paddle-scale: 1.14; height: 82px; max-height: 82px; min-height: 82px; padding: 0; } .tile span { font-size: 0.58rem; max-width: 82%; padding: 0.1rem 0.15rem; width: min(4.6rem, 82%); } .tile-player span, .tile-player span.tile-text-medium, .tile-player span.tile-text-long, .tile-player span.tile-text-xl { font-size: clamp(0.42rem, 2vw, 0.52rem); /* Letra más grande */ max-width: 125%; width: min(5.5rem, 125%); } .tile-gender span, .tile-side span, .tile-age span { font-size: 0.49rem; max-width: 76%; white-space: nowrap; width: auto; } .tile-racket span { font-size: 0.4rem; max-width: 74%; width: min(4.45rem, 74%); } .tile span.tile-text-empty { font-size: 0.7rem; } .tile span.tile-text-short { font-size: 0.55rem; } .tile span.tile-text-medium { font-size: 0.49rem; } .tile span.tile-text-long { font-size: 0.36rem; max-width: 72%; overflow-wrap: anywhere; width: min(4.45rem, 72%); } .tile span.tile-text-xl { font-size: 0.3rem; max-width: 76%; overflow-wrap: anywhere; width: min(4.65rem, 76%); } .tile-racket span.tile-text-medium, .tile-racket span.tile-text-long { font-size: 0.36rem; max-width: 78%; overflow-wrap: normal; width: min(4.55rem, 78%); } .app-shell { padding-top: 5.4rem; } } /* Nicer background aurora effect on desktop */ @media (min-width: 760px) { body::after { background: url("../assets/padel-racket-photo.png "), linear-gradient(125deg, transparent 0 55%, rgba(253, 224, 71, 0.06) 55.5% 56%, transparent 56.5%), radial-gradient(ellipse 60% 40% at 70% 30%, rgba(245, 158, 11, 0.08), transparent 60%); background-position: right var(--players-right) top var(--players-top), center, center; background-repeat: no-repeat, no-repeat, no-repeat; background-size: var(--players-size) auto, auto, auto; } } /* Smooth tile hover on desktop */ @media (hover: hover) { .tile:hover { filter: drop-shadow(0 16px 20px rgba(2, 6, 23, 0.28)); transform: translateY(-3px) scale(1.02); } } /* ============================================= RETO PADEL / GUESS THE RACKET ============================================= */ body.racket-page { --players-size: min(94vw, 420px); --players-top: 130px; min-height: 100vh; } body.racket-page::after { background: url("../assets/padel-racket-photo.png "), linear-gradient(120deg, transparent 0 58%, rgba(20, 184, 166, 0.08) 58.4% 58.9%, transparent 59.3%); background-position: right clamp(-5rem, -6vw, -1rem) top clamp(5rem, 10vw, 8rem), center; background-repeat: no-repeat; background-size: min(70vw, 470px) auto, auto; opacity: 0.28; } .racket-shell { margin: 0 auto; max-width: 1440px; min-height: 100vh; padding: clamp(0.85rem, 2vw, 1.35rem) clamp(0.8rem, 2vw, 1.35rem) 1rem calc(var(--nav-rail-w) + clamp(0.8rem, 2vw, 1.35rem)); position: relative; z-index: 1; } .racket-game { align-items: start; display: grid; gap: clamp(0.65rem, 1.5vw, 1rem); grid-template-columns: minmax(0, 1fr); margin: 0 auto; width: 100%; } .racket-header { align-self: start; justify-self: center; max-width: 960px; padding-top: 0; text-align: center; width: 100%; } .pair-instructions-button { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(253, 230, 138, 0.34); border-radius: 8px; color: rgb(253, 230, 138); cursor: pointer; font-size: 0.82rem; font-weight: 950; margin-top: 0.55rem; min-height: 36px; padding: 0.5rem 0.72rem; text-transform: uppercase; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; } .pair-instructions-button:hover { background: rgba(253, 230, 138, 0.12); border-color: rgba(253, 230, 138, 0.62); transform: translateY(-1px); } .racket-stage { background: linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(3, 7, 18, 0.94)), radial-gradient(ellipse 64% 42% at 90% 4%, rgba(20, 184, 166, 0.14), transparent 62%), radial-gradient(ellipse 62% 42% at 10% 0%, rgba(251, 191, 36, 0.16), transparent 58%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); display: flex; flex-direction: column; gap: clamp(0.52rem, 1vw, 0.78rem); min-width: 0; padding: clamp(0.65rem, 1.4vw, 1rem); } .racket-progress { align-items: center; display: flex; gap: 0.9rem; justify-content: space-between; } .racket-progress-text { display: block; color: rgb(253, 230, 138); font-size: 0.82rem; font-weight: 950; text-transform: uppercase; } .racket-remaining { color: rgb(148, 163, 184); display: block; font-size: 0.76rem; font-weight: 850; margin-top: 0.2rem; } .racket-steps { display: grid; gap: 0.35rem; grid-template-columns: repeat(5, 1fr); min-width: min(42vw, 210px); } .racket-step { background: rgba(148, 163, 184, 0.3); border-radius: 999px; height: 8px; } .racket-step-seen { background: rgb(20, 184, 166); } .racket-step-active { background: rgb(253, 224, 71); box-shadow: 0 0 18px rgba(253, 224, 71, 0.35); } .pair-overview-grid { display: grid; gap: 0.55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pair-overview-card { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; display: grid; gap: 0.32rem; min-height: 58px; padding: 0.52rem; } .pair-overview-card span { color: rgb(148, 163, 184); font-size: clamp(0.54rem, 0.72vw, 0.66rem); font-weight: 950; text-transform: uppercase; } .pair-overview-card strong { color: rgb(248, 250, 252); font-size: clamp(0.68rem, 0.9vw, 0.86rem); font-weight: 900; line-height: 1.16; } .racket-search-card { position: relative; z-index: 4; } .racket-search-card label { color: rgb(226, 232, 240); display: block; font-size: 0.86rem; font-weight: 900; margin-bottom: 0.35rem; } .racket-actions { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr) auto; } .racket-combobox { min-width: 0; position: relative; } .racket-search-input { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; color: rgb(15, 23, 42); font-size: clamp(0.86rem, 1vw, 1rem); min-height: 42px; outline: none; padding: 0.62rem 0.8rem; width: 100%; } .racket-search-input:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.26), 0 14px 34px rgba(2, 6, 23, 0.36); } .racket-guess-button { align-items: center; background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 54%, rgb(20, 184, 166)); border: 0; border-radius: 8px; color: rgb(2, 6, 23); cursor: pointer; display: inline-flex; font-size: 0.88rem; font-weight: 950; justify-content: center; min-height: 42px; padding: 0.62rem 0.9rem; text-decoration: none; transition: filter 160ms ease, transform 160ms ease; white-space: nowrap; } .racket-guess-button:hover { filter: brightness(1.07); transform: translateY(-1px); } .racket-guess-button:disabled { cursor: not-allowed; filter: grayscale(0.8); opacity: 0.55; transform: none; } .racket-suggestions { background: rgb(15, 23, 42); border: 1px solid rgba(34, 211, 238, 0.18); border-radius: 8px; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.46); left: 0; list-style: none; margin: 0.45rem 0 0; max-height: 240px; overflow-y: auto; padding: 0.25rem; position: absolute; right: 0; top: 100%; z-index: 30; } .racket-suggestions li { border-radius: 6px; color: rgb(248, 250, 252); cursor: pointer; display: grid; gap: 0.18rem; padding: 0.72rem 0.8rem; } .racket-suggestions li strong { color: rgb(248, 250, 252); font-size: 0.92rem; font-weight: 900; } .racket-suggestions li span { color: rgb(148, 163, 184); font-size: 0.74rem; font-weight: 800; } .racket-suggestions li:hover, .racket-suggestions li:focus { background: rgba(253, 224, 71, 0.14); outline: none; } .racket-feedback { color: rgb(253, 230, 138); font-size: 0.85rem; font-weight: 800; min-height: 1.25rem; margin: 0.45rem 0 0; } .racket-feedback-empty { opacity: 0; } .racket-legend { display: flex; flex-wrap: wrap; gap: 0.45rem; } .racket-legend span { border-radius: 999px; font-size: 0.72rem; font-weight: 950; padding: 0.38rem 0.58rem; text-transform: uppercase; } .racket-legend-exact { background: rgba(22, 163, 74, 0.2); border: 1px solid rgba(74, 222, 128, 0.36); color: rgb(187, 247, 208); } .racket-legend-close { background: rgba(217, 119, 6, 0.2); border: 1px solid rgba(251, 191, 36, 0.38); color: rgb(254, 240, 138); } .racket-legend-wrong { background: rgba(244, 63, 94, 0.22); border: 1px solid rgba(251, 113, 133, 0.44); color: rgb(254, 205, 211); } .racket-table-shell { overflow-x: visible; padding-bottom: 0; } .racket-comparison-table { border-collapse: separate; border-spacing: clamp(0.12rem, 0.35vw, 0.28rem); min-width: 0; table-layout: fixed; width: 100%; } .racket-comparison-table th { color: rgb(148, 163, 184); font-size: clamp(0.5rem, 0.68vw, 0.64rem); font-weight: 950; padding: 0 0.2rem; text-align: left; text-transform: uppercase; } .racket-comparison-row { animation: racketRowIn 260ms ease both; animation-delay: calc(var(--row-index, 0) * 35ms); } .racket-player-cell, .racket-compare-cell { border-radius: 8px; height: clamp(42px, 5vw, 58px); padding: clamp(0.25rem, 0.48vw, 0.44rem); vertical-align: middle; } .racket-player-cell { background: rgba(15, 23, 42, 0.82); border: 1px solid rgba(148, 163, 184, 0.2); min-width: 0; } .racket-player-cell span { align-items: center; background: rgba(125, 211, 252, 0.18); border: 1px solid rgba(125, 211, 252, 0.24); border-radius: 999px; color: rgb(186, 230, 253); display: inline-flex; font-size: clamp(0.54rem, 0.65vw, 0.68rem); font-weight: 950; height: clamp(18px, 1.8vw, 22px); justify-content: center; margin-right: 0.42rem; width: clamp(18px, 1.8vw, 22px); } .racket-player-cell strong { color: rgb(248, 250, 252); display: inline; font-size: clamp(0.55rem, 0.78vw, 0.76rem); font-weight: 950; line-height: 1.08; } .racket-compare-cell { border: 1px solid transparent; min-width: 0; } .racket-compare-cell span { display: block; font-size: clamp(0.46rem, 0.58vw, 0.56rem); font-weight: 950; margin-bottom: 0.18rem; opacity: 0.82; text-transform: uppercase; } .racket-compare-cell strong { display: block; font-size: clamp(0.52rem, 0.74vw, 0.72rem); font-weight: 950; line-height: 1.08; overflow-wrap: anywhere; } .racket-compare-cell em { display: block; font-size: clamp(0.46rem, 0.58vw, 0.56rem); font-style: normal; font-weight: 950; margin-top: 0.2rem; text-transform: uppercase; } .racket-compare-exact { background: rgba(21, 128, 61, 0.9); border-color: rgba(187, 247, 208, 0.34); color: rgb(240, 253, 244); } .racket-compare-close { background: rgba(202, 138, 4, 0.9); border-color: rgba(254, 240, 138, 0.38); color: rgb(255, 251, 235); } .racket-compare-wrong { background: rgba(190, 18, 60, 0.9); border-color: rgba(251, 113, 133, 0.42); color: rgb(255, 241, 242); } .racket-comparison-row-hit .racket-player-cell { border-color: rgba(74, 222, 128, 0.54); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.16); } .racket-modal-close { align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: rgb(248, 250, 252); cursor: pointer; display: flex; height: 40px; justify-content: center; position: absolute; right: 0.9rem; top: 0.9rem; width: 40px; } .racket-modal-close span, .racket-modal-close span::after { background: currentColor; border-radius: 999px; content: ""; display: block; height: 2px; width: 17px; } .racket-modal-close span { transform: rotate(45deg); } .racket-modal-close span::after { transform: rotate(90deg); } .racket-result-eyebrow { color: rgb(253, 230, 138); font-size: 0.9rem; font-weight: 950; margin: 0 2.8rem 0.35rem; text-transform: uppercase; } .pair-instructions-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 400; } .pair-instructions-backdrop { background: rgba(0, 0, 0, 0.66); inset: 0; position: absolute; } .pair-instructions-card { animation: racketResultPop 360ms ease both; background: linear-gradient(150deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)), radial-gradient(ellipse 58% 42% at 90% 0%, rgba(20, 184, 166, 0.18), transparent 62%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; box-shadow: 0 32px 90px rgba(0, 0, 0, 0.62); max-width: 480px; padding: clamp(1rem, 3vw, 1.35rem); position: relative; width: min(100%, 480px); } .pair-instructions-card h2 { color: rgb(248, 250, 252); font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1; margin: 0 2.6rem 1rem 0; } .pair-instructions-card ul { display: grid; gap: 0.62rem; list-style: none; margin: 0; padding: 0; } .pair-instructions-card li { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; color: rgb(226, 232, 240); font-size: 0.94rem; font-weight: 750; line-height: 1.35; padding: 0.72rem 0.82rem; } @keyframes racketResultPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes racketRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes racketSuccess { 0% { transform: scale(0.98); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } } @media (max-width: 920px) { .racket-game { grid-template-columns: minmax(0, 1fr); } .racket-header { max-width: 680px; } .racket-comparison-table thead { display: none; } .racket-comparison-table, .racket-comparison-table tbody, .racket-comparison-table tr, .racket-comparison-table th, .racket-comparison-table td { display: block; width: 100%; } .racket-comparison-table { border-spacing: 0; } .racket-comparison-table tbody { display: grid; gap: 0.65rem; } .racket-comparison-row { background: rgba(15, 23, 42, 0.58); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; display: grid !important; gap: 0.42rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.52rem; } .racket-player-cell, .racket-compare-cell { height: auto; min-height: 58px; } .racket-player-cell { grid-column: 1 / -1; } .racket-player-cell::before, .racket-compare-cell::before { color: rgba(226, 232, 240, 0.7); content: attr(data-label); display: block; font-size: 0.58rem; font-weight: 950; margin-bottom: 0.2rem; text-transform: uppercase; } .racket-player-cell strong { font-size: 0.9rem; } .racket-compare-cell strong { font-size: 0.8rem; } } @media (max-width: 640px) { .racket-shell { padding: 4.5rem 0.75rem 1rem; } body.racket-page::after { opacity: 0.18; } .racket-header { padding: 0 0.15rem; } .racket-header h1 { font-size: clamp(1.7rem, 9vw, 2.5rem); } .racket-stage { padding: 0.75rem; } .racket-progress { align-items: flex-start; flex-direction: column; gap: 0.55rem; } .racket-steps { width: 100%; } .racket-actions { grid-template-columns: minmax(0, 1fr); } .racket-guess-button { width: 100%; } .pair-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .racket-comparison-row { grid-template-columns: minmax(0, 1fr); } .racket-result-eyebrow { margin-left: 2.3rem; margin-right: 2.3rem; } } /* ============================================= MEMORY PADEL ============================================= */ body.memory-page { min-height: 100vh; } body.memory-page::after { background: url("../assets/padel-racket-photo.png "), linear-gradient(120deg, transparent 0 60%, rgba(253, 224, 71, 0.08) 60.4% 60.8%, transparent 61.2%); background-position: right clamp(-5rem, -5vw, -1rem) top clamp(5rem, 9vw, 7rem), center; background-repeat: no-repeat; background-size: min(58vw, 420px) auto, auto; opacity: 0.2; } .memory-shell { margin: 0 auto; max-width: 1180px; min-height: 100svh; padding: clamp(0.75rem, 1.5vw, 1.2rem) clamp(0.75rem, 1.8vw, 1.2rem) 0.8rem calc(var(--nav-rail-w) + clamp(0.75rem, 1.8vw, 1.2rem)); position: relative; z-index: 1; } .memory-user-points { align-items: center; background: rgba(15, 23, 42, 0.82); border: 1px solid rgba(253, 224, 71, 0.28); border-radius: 8px; display: inline-flex; gap: 0.5rem; justify-content: center; min-height: 38px; padding: 0.42rem 0.68rem; position: fixed; left: calc(var(--nav-rail-w) + clamp(0.75rem, 2vw, 1.2rem)); top: clamp(0.75rem, 2vw, 1.2rem); z-index: 45; } .memory-user-points span { color: rgb(253, 230, 138); font-size: 0.62rem; font-weight: 950; text-transform: uppercase; } .memory-user-points strong { color: rgb(248, 250, 252); font-size: 0.88rem; font-weight: 950; } .memory-game { display: grid; gap: clamp(0.45rem, 1.1vw, 0.75rem); } .memory-header { margin: 0 auto; max-width: 680px; text-align: center; } .memory-kicker { color: rgb(125, 211, 252); display: block; font-size: 0.78rem; font-weight: 950; margin-bottom: 0.25rem; text-transform: uppercase; } .memory-header h1 { margin-bottom: 0.5rem; } .memory-panel { background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(3, 7, 18, 0.95)), radial-gradient(ellipse 58% 40% at 92% 2%, rgba(20, 184, 166, 0.14), transparent 62%), radial-gradient(ellipse 55% 38% at 8% 0%, rgba(251, 191, 36, 0.16), transparent 58%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); display: grid; gap: clamp(0.42rem, 0.9vw, 0.72rem); min-height: 0; padding: clamp(0.58rem, 1.2vw, 0.9rem); } .memory-toolbar { align-items: center; display: flex; gap: 0.7rem; justify-content: space-between; } .memory-levels { display: flex; flex-wrap: wrap; gap: 0.45rem; } .memory-level-button, .memory-primary-button, .memory-collect-button { border-radius: 8px; cursor: pointer; font-size: 0.78rem; font-weight: 950; min-height: 36px; padding: 0.48rem clamp(0.4rem, 1vw, 0.66rem); transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; } .memory-level-button { background: rgba(255, 255, 255, 0.065); border: 1px solid rgba(255, 255, 255, 0.1); color: rgb(226, 232, 240); } .memory-level-button:disabled { cursor: default; } .memory-level-active { background: rgba(253, 224, 71, 0.16); border-color: rgba(253, 224, 71, 0.42); color: rgb(254, 240, 138); } .memory-level-locked { filter: grayscale(0.8); opacity: 0.5; padding-right: 2rem; position: relative; } .memory-level-locked::after { background: linear-gradient(145deg, rgb(254, 240, 138), rgb(245, 158, 11)); border: 1px solid rgba(120, 53, 15, 0.32); border-radius: 4px; box-shadow: 0 0 12px rgba(253, 224, 71, 0.28); content: ""; height: 12px; position: absolute; right: 0.58rem; top: 50%; transform: translateY(-28%); width: 14px; } .memory-level-locked::before { border: 2px solid rgb(253, 224, 71); border-bottom: 0; border-radius: 999px 999px 0 0; content: ""; height: 9px; position: absolute; right: 0.7rem; top: calc(50% - 10px); width: 8px; z-index: 1; } .memory-primary-button { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 58%, rgb(20, 184, 166)); border: 0; color: rgb(2, 6, 23); } .memory-collect-button { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.34); color: rgb(226, 232, 240); } .memory-claim-button { background: linear-gradient(135deg, rgb(20, 184, 166), rgb(125, 211, 252)); border: 0; border-radius: 8px; color: rgb(2, 6, 23); cursor: pointer; font-size: 0.78rem; font-weight: 950; min-height: 36px; padding: 0.48rem clamp(0.4rem, 1vw, 0.66rem); } .memory-level-button:hover, .memory-primary-button:hover, .memory-collect-button:hover, .memory-claim-button:hover { transform: translateY(-1px); } .memory-stats { display: grid; gap: 0.55rem; grid-template-columns: repeat(5, minmax(0, 1fr)); } .memory-stats article { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; display: grid; gap: 0.22rem; min-height: 48px; padding: 0.48rem; } .memory-stats span { color: rgb(148, 163, 184); font-size: clamp(0.52rem, 0.7vw, 0.64rem); font-weight: 950; text-transform: uppercase; } .memory-stats strong { color: rgb(248, 250, 252); font-size: clamp(0.78rem, 1vw, 1rem); font-weight: 950; } .memory-feedback { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; } .memory-board { display: grid; gap: clamp(0.32rem, 0.8vw, 0.55rem); grid-template-columns: repeat(var(--memory-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--memory-rows), minmax(0, 1fr)); height: min(50vw, calc(100svh - 290px)); min-height: 0; } .memory-card { background: transparent; border: 0; cursor: pointer; min-height: 0; padding: 0; perspective: 700px; position: relative; transform-style: preserve-3d; } .memory-card span { align-items: center; backface-visibility: hidden; border-radius: 8px; display: flex; flex-direction: column; inset: 0; justify-content: center; position: absolute; transform-style: preserve-3d; transition: transform 260ms ease, box-shadow 160ms ease, border-color 160ms ease; } .memory-card-back { background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98)), radial-gradient(circle at 50% 42%, rgba(253, 224, 71, 0.2), transparent 42%); border: 1px solid rgba(253, 224, 71, 0.24); transform: rotateY(0deg) translateZ(1px); } .memory-card-front { background: linear-gradient(145deg, rgba(240, 253, 250, 0.98), rgba(226, 232, 240, 0.98)); border: 1px solid rgba(20, 184, 166, 0.42); color: rgb(15, 23, 42); padding: clamp(0.18rem, 0.7vw, 0.42rem); text-align: center; transform: rotateY(180deg) translateZ(1px); } .memory-card-front img { border-radius: 6px; display: block; height: 100%; object-fit: cover; width: 100%; } .memory-card-front--fallback { align-items: center; background: linear-gradient(145deg, rgba(20, 184, 166, 0.18), rgba(15, 23, 42, 0.1)); display: flex; justify-content: center; } .memory-card-fallback-label { font-size: clamp(0.55rem, 2.4vw, 0.78rem); font-weight: 800; line-height: 1.2; text-transform: capitalize; } .memory-card-back img { display: block; height: min(58%, 46px); object-fit: contain; width: min(58%, 46px); } .memory-card-graphic img { filter: drop-shadow(0 10px 16px rgba(2, 6, 23, 0.24)); height: 82%; object-fit: contain; width: 82%; } .memory-card-pictogram img { filter: invert(1) drop-shadow(0 10px 16px rgba(2, 6, 23, 0.22)); } .memory-card-open .memory-card-back, .memory-card-matched .memory-card-back { transform: rotateY(180deg) translateZ(1px); } .memory-card-open .memory-card-front, .memory-card-matched .memory-card-front { transform: rotateY(0deg) translateZ(1px); } .memory-card-matched .memory-card-front { border-color: rgba(74, 222, 128, 0.8); box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18); } .memory-final-panel { animation: racketResultPop 360ms ease both; background: rgba(15, 23, 42, 0.76); border: 1px solid rgba(74, 222, 128, 0.34); border-radius: 8px; padding: 0.85rem; text-align: center; position: relative; overflow: hidden; } .memory-final-panel p { color: rgb(187, 247, 208); font-size: 0.72rem; font-weight: 950; margin: 0 0 0.25rem; text-transform: uppercase; } .memory-final-panel h2 { color: rgb(248, 250, 252); font-size: clamp(1.25rem, 4vw, 1.8rem); margin: 0 0 0.35rem; } .memory-final-panel strong { color: rgb(203, 213, 225); font-size: 0.92rem; } .memory-countdown { background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.24); border-radius: 8px; color: rgb(204, 251, 241) !important; font-size: 0.82rem !important; font-weight: 950 !important; margin: 0.65rem auto 0 !important; max-width: 320px; padding: 0.52rem 0.7rem; } .memory-final-actions { display: grid; gap: 0.55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.75rem; } .memory-message-overlay { align-items: center; background: rgba(2, 6, 23, 0.66); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 95; } .memory-message-card { animation: racketResultPop 280ms ease both; background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)), radial-gradient(ellipse 58% 40% at 86% 0%, rgba(253, 224, 71, 0.18), transparent 64%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.54); max-width: 440px; padding: 1.15rem; position: relative; text-align: center; width: min(100%, 440px); } .memory-message-close { align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: rgb(248, 250, 252); cursor: pointer; display: flex; height: 34px; justify-content: center; position: absolute; right: 0.75rem; top: 0.75rem; width: 34px; } .memory-message-close span, .memory-message-close span::after { background: currentColor; border-radius: 999px; content: ""; display: block; height: 2px; width: 15px; } .memory-message-close span { transform: rotate(45deg); } .memory-message-close span::after { transform: rotate(90deg); } .memory-message-card > p:first-of-type { color: rgb(253, 230, 138); font-size: 0.72rem; font-weight: 950; margin: 0 2.4rem 0.35rem; text-transform: uppercase; } .memory-message-card h2 { color: rgb(248, 250, 252); font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.05; margin: 0 2.2rem 0.5rem; } .memory-message-card > p:last-of-type { color: rgb(203, 213, 225); font-size: 0.94rem; font-weight: 750; line-height: 1.4; margin: 0; } .memory-message-actions { display: grid; gap: 0.55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.9rem; } .memory-message-primary, .memory-message-secondary { align-items: center; border-radius: 8px; cursor: pointer; display: inline-flex; font-size: 0.82rem; font-weight: 950; justify-content: center; min-height: 38px; padding: 0.55rem 0.72rem; text-decoration: none; } .memory-message-primary { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 58%, rgb(20, 184, 166)); border: 0; color: rgb(2, 6, 23); } .memory-message-secondary { background: rgba(15, 23, 42, 0.88); border: 1px solid rgba(148, 163, 184, 0.28); color: rgb(226, 232, 240); } .memory-daily-complete { border-color: rgba(253, 224, 71, 0.58); box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.18), 0 20px 48px rgba(0, 0, 0, 0.26); } .memory-confetti { inset: 0; pointer-events: none; position: absolute; } .memory-confetti span { animation: memoryConfetti 1150ms ease-out both; background: rgb(253, 224, 71); border-radius: 2px; height: 9px; left: var(--confetti-x); position: absolute; top: -12px; transform: rotate(var(--confetti-rotate)); width: 5px; } .memory-confetti span:nth-child(3n) { background: rgb(20, 184, 166); } .memory-confetti span:nth-child(4n) { background: rgb(125, 211, 252); } @keyframes memoryConfetti { 0% { opacity: 0; transform: translateY(0) rotate(var(--confetti-rotate)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(140px) rotate(calc(var(--confetti-rotate) + 220deg)); } } @media (max-width: 760px) { .memory-shell { padding: 4.35rem 0.65rem 0.65rem; } .memory-user-points { min-height: 32px; padding: 0.32rem 0.48rem; left: auto; right: 0.65rem; top: calc(64px + 3.7rem + env(safe-area-inset-top)); z-index: 230; } .memory-toolbar { align-items: stretch; flex-direction: column; } .memory-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .memory-level-button, .memory-primary-button { min-width: 0; width: 100%; } .memory-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .memory-board { grid-template-columns: repeat(var(--memory-mobile-columns), minmax(0, 1fr)) !important; grid-template-rows: repeat(var(--memory-mobile-rows), minmax(0, 1fr)); height: calc(100svh - 380px); } } @media (max-width: 420px) { .memory-level-button { font-size: 0.68rem; min-height: 32px; } .memory-stats span { font-size: 0.44rem; } .memory-stats strong { font-size: 0.68rem; } .memory-final-actions { grid-template-columns: minmax(0, 1fr); } .memory-message-actions { grid-template-columns: minmax(0, 1fr); } } /* PaDLE compact responsive tuning */ .title-lockup { aspect-ratio: 3 / 1; max-width: min(78vw, 430px); } .padle-title-logo { transform: translateY(-50%) scale(0.96); width: min(100%, 430px); } .tile { --paddle-scale: 1.05; height: 82px; max-height: 82px; min-height: 82px; padding: 0.82rem 0.36rem 0.98rem; } .tile span { max-width: 70%; } .tile span.tile-text-long { max-width: 82%; } .tile span.tile-text-xl { max-width: 88%; } @media (min-width: 760px) { .title-lockup { max-width: min(66vw, 460px); } .padle-title-logo { width: min(100%, 460px); } .tile { --paddle-scale: 1.08; height: 88px; max-height: 88px; min-height: 88px; padding: 0.9rem 0.44rem 1.06rem; } } @media (min-width: 1040px) { .title-lockup { max-width: 480px; } .padle-title-logo { width: min(100%, 480px); } .tile { --paddle-scale: 1.1; height: 92px; max-height: 92px; min-height: 92px; padding: 0.98rem 0.48rem 1.1rem; } } @media (max-width: 759px) { .title-lockup { max-width: none; width: min(88vw, 340px); } .padle-title-logo { transform: translateY(-51%) scale(0.96); width: 92%; } .tile { --paddle-scale: 1.06; height: 68px; max-height: 68px; min-height: 68px; padding: 0.66rem 0.1rem 0.78rem; } .tile span { max-width: 72%; } } @media (max-width: 380px) { .title-lockup { width: min(88vw, 300px); } .tile { height: 60px; max-height: 60px; min-height: 60px; padding: 0.56rem 0.06rem 0.68rem; } } /* ============================================= RESPONSIVE SAFETY PASS ============================================= */ html { overflow-x: hidden; } body, main, section, article, aside, header, footer, nav, div { min-width: 0; } img, video, canvas { height: auto; max-width: 100%; } input, button, select, textarea { max-width: 100%; } .app-shell, .racket-shell, .memory-shell { width: 100%; } .suggestions-list, .racket-suggestions { overscroll-behavior: contain; } .result-overlay, .pair-instructions-modal, .memory-message-overlay { max-width: 100vw; } .result-alert, .profile-alert, .pair-instructions-card, .memory-message-card { width: min(100%, var(--responsive-modal-width, 520px)); } .racket-table-shell { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .memory-board { max-width: 100%; } @media (max-width: 920px) { .racket-table-shell { overflow-x: visible; } } @media (max-width: 759px) { .app-shell { max-width: 100%; } .search-card > div { min-width: 0; } .search-input { min-width: 0; } .suggestions-list { max-width: 100%; } .result-alert, .profile-alert { --responsive-modal-width: calc(100vw - 24px); } } @media (max-width: 640px) { .header-share-button, .profile-button, .logout-button { min-height: 44px; } .language-button { min-height: 36px; } .pair-instructions-card, .memory-message-card { --responsive-modal-width: calc(100vw - 24px); max-height: min(92svh, 760px); overflow-y: auto; } .pair-overview-card, .racket-player-cell, .racket-compare-cell { overflow-wrap: anywhere; } .racket-steps { min-width: 0; } } @media (max-width: 520px) { .memory-stats { gap: 0.35rem; } .memory-stats article { min-height: 42px; padding: 0.38rem 0.26rem; } .memory-board { height: clamp(230px, calc(100svh - 365px), 520px); } } @media (max-width: 420px) { .home-menu-card strong, .side-nav-game strong, .memory-level-button, .memory-primary-button, .memory-collect-button, .memory-claim-button { overflow-wrap: anywhere; } .home-menu-sheet, .side-nav-panel { overscroll-behavior: contain; } .memory-user-points { max-width: calc(100vw - 1.3rem); } .memory-board { height: clamp(210px, calc(100svh - 345px), 480px); } } @media (max-width: 340px) { .app-shell, .racket-shell, .memory-shell { padding-left: 0.45rem; padding-right: 0.45rem; } .rules-panel > div { gap: 0.22rem; } .guess-button, .racket-guess-button, .memory-primary-button, .memory-collect-button, .memory-claim-button { font-size: 0.72rem; } } /* ============================================= PÁDEL CHALLENGE (minijuego de reflejos) ============================================= */ .reflex-shell { margin: 0 auto; max-width: 720px; min-height: 100svh; padding: clamp(0.75rem, 1.6vw, 1.3rem) clamp(0.85rem, 2vw, 1.4rem) 1.2rem calc(var(--nav-rail-w) + clamp(0.85rem, 2vw, 1.4rem)); position: relative; z-index: 1; } .reflex-game { display: grid; gap: clamp(0.6rem, 1.4vw, 1rem); } .reflex-header { margin: 0 auto; max-width: 560px; text-align: center; } .reflex-header h1 { background: linear-gradient(135deg, rgb(254, 240, 138), rgb(245, 158, 11) 52%, rgb(20, 184, 166)); -webkit-background-clip: text; background-clip: text; color: rgb(248, 250, 252); -webkit-text-fill-color: transparent; font-size: clamp(2.4rem, 7.2vw, 4.1rem); font-weight: 950; letter-spacing: -0.01em; line-height: 1.06; margin: 0 0 0.12em; padding-bottom: 0.06em; white-space: nowrap; } .reflex-subtitle { color: rgb(148, 163, 184); font-size: clamp(0.78rem, 1.4vw, 0.94rem); line-height: 1.45; margin: 0.55rem auto 0; max-width: 460px; } .reflex-subtitle kbd, .reflex-hint kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; color: rgb(254, 240, 138); font-family: inherit; font-size: 0.82em; font-weight: 900; padding: 0.05em 0.4em; } .reflex-scoreboard { display: grid; gap: 0.55rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .reflex-scoreboard article { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; display: grid; gap: 0.24rem; min-height: 52px; padding: 0.5rem 0.4rem; text-align: center; } .reflex-scoreboard span { color: rgb(148, 163, 184); font-size: clamp(0.54rem, 0.9vw, 0.66rem); font-weight: 950; text-transform: uppercase; } .reflex-scoreboard strong { color: rgb(248, 250, 252); font-size: clamp(0.95rem, 1.6vw, 1.25rem); font-weight: 950; } .reflex-stage { background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(3, 7, 18, 0.95)), radial-gradient(ellipse 58% 40% at 92% 2%, rgba(20, 184, 166, 0.16), transparent 62%), radial-gradient(ellipse 55% 38% at 8% 0%, rgba(251, 191, 36, 0.18), transparent 58%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); display: grid; gap: clamp(0.5rem, 1.2vw, 0.85rem); overflow: hidden; padding: clamp(0.7rem, 1.6vw, 1.05rem); position: relative; touch-action: manipulation; user-select: none; } .reflex-stage.is-armed { cursor: pointer; } .reflex-stage.is-shake { animation: reflexShake 420ms ease; } /* Cuenta atrás de 4 s */ .reflex-timer { background: rgba(255, 255, 255, 0.08); border-radius: 999px; height: 6px; overflow: hidden; position: relative; width: 100%; } .reflex-timer-fill { background: linear-gradient(90deg, rgb(20, 184, 166), rgb(125, 211, 252)); border-radius: 999px; display: block; height: 100%; transform: scaleX(1); transform-origin: left center; width: 100%; } .reflex-timer-fill.is-low { background: linear-gradient(90deg, rgb(245, 158, 11), rgb(239, 68, 68)); } /* Pista de juego */ .reflex-court { border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; background: radial-gradient(ellipse 70% 55% at 50% 12%, rgba(14, 165, 233, 0.1), transparent 60%), linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(6, 78, 59, 0.18)); height: clamp(230px, 33vh, 350px); overflow: hidden; position: relative; } .reflex-court-lines { inset: 0; pointer-events: none; position: absolute; } .reflex-court-lines::before { border: 2px solid rgba(255, 255, 255, 0.12); border-bottom: 0; border-radius: 10px 10px 0 0; content: ""; inset: 8% 18% 0; position: absolute; } .reflex-court-lines::after { background: rgba(255, 255, 255, 0.12); content: ""; height: 1px; left: 18%; position: absolute; right: 18%; top: 46%; } .reflex-ball { left: 50%; position: absolute; top: 6%; transform: translateX(-50%); width: clamp(34px, 9vw, 54px); z-index: 3; } .reflex-ball img { display: block; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); height: auto; width: 100%; } .reflex-ball.is-serving { top: 38%; transition: none; } .reflex-ball.is-dropping { top: 38%; transition: top var(--drop-ms, 930ms) cubic-bezier(0.45, 0, 0.74, 0.48); } .reflex-ball.is-hit { top: var(--ball-hit-top, 38%); transition: top 90ms linear; } .reflex-ball.is-hit img { transform: scaleX(1.28) scaleY(0.72); transition: transform 110ms ease; } .reflex-ball.is-rising { top: 6%; transition: top 460ms cubic-bezier(0.22, 0.68, 0.3, 1); } .reflex-ball.is-bouncing { /* Sube hasta la posición base (6%) para encadenar con la caída sin saltos. */ top: 6%; transition: top 720ms cubic-bezier(0.18, 0.86, 0.24, 1); } .reflex-ball.is-missed { opacity: 0; top: 116%; transition: top 720ms cubic-bezier(0.5, 0, 0.85, 0.5), opacity 720ms ease; } .reflex-ball.is-warning-miss { opacity: 0.72; top: 74%; transform: translateX(-50%) rotate(10deg); transition: top 520ms cubic-bezier(0.5, 0, 0.85, 0.5), opacity 520ms ease, transform 520ms ease; } .reflex-racket { bottom: 3%; height: 42%; left: 50%; position: absolute; transform: translateX(-50%); transform-origin: bottom center; z-index: 2; } .reflex-racket img { display: block; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); height: 100%; width: auto; } .reflex-racket.is-swing { animation: reflexSwing 320ms ease; } .reflex-feedback { color: rgb(248, 250, 252); font-size: clamp(1.1rem, 3.4vw, 1.7rem); font-weight: 950; left: 50%; letter-spacing: 0.01em; margin: 0; opacity: 0; pointer-events: none; position: absolute; text-align: center; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6); top: 20%; transform: translate(-50%, 0) scale(0.9); white-space: nowrap; z-index: 4; } .reflex-feedback.is-visible { animation: reflexFeedbackPop 760ms ease forwards; } .reflex-feedback[data-tone="perfect"] { color: rgb(74, 222, 128); } .reflex-feedback[data-tone="good"] { color: rgb(163, 230, 53); } .reflex-feedback[data-tone="risky"] { color: rgb(250, 204, 21); } .reflex-feedback[data-tone="danger"] { color: rgb(251, 146, 60); } .reflex-feedback[data-tone="miss"] { color: rgb(248, 113, 113); } /* Barra de precisión */ .reflex-precision { padding: 0.15rem 0.1rem 0.2rem; } .reflex-precision-track { /* Las bandas coinciden con getPrecisionZone() en reflejos-padel.js: rojo 0-18%, naranja 18-34%, amarillo 34-45%, verde 45-55% (y espejo). */ background: linear-gradient( 90deg, rgb(239, 68, 68) 0%, rgb(239, 68, 68) 16%, rgb(249, 115, 22) 20%, rgb(249, 115, 22) 32%, rgb(234, 179, 8) 36%, rgb(234, 179, 8) 43%, rgb(74, 222, 128) 47%, rgb(74, 222, 128) 53%, rgb(234, 179, 8) 57%, rgb(234, 179, 8) 64%, rgb(249, 115, 22) 68%, rgb(249, 115, 22) 80%, rgb(239, 68, 68) 84%, rgb(239, 68, 68) 100% ); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 18px rgba(74, 222, 128, 0.12); height: clamp(16px, 3.4vw, 22px); position: relative; } .reflex-precision-track::after { background: rgba(255, 255, 255, 0.85); border-radius: 999px; content: ""; height: 60%; left: 50%; opacity: 0.45; position: absolute; top: 20%; transform: translateX(-50%); width: 2px; } .reflex-needle { background: rgb(248, 250, 252); border-radius: 4px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 4px rgba(2, 6, 23, 0.6); height: calc(100% + 12px); left: 50%; position: absolute; top: -6px; transform: translateX(-50%); width: 4px; z-index: 2; } .reflex-needle::before, .reflex-needle::after { border: 6px solid transparent; content: ""; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; } .reflex-needle::before { border-bottom-color: rgb(248, 250, 252); border-top: 0; top: -7px; } .reflex-needle::after { border-top-color: rgb(248, 250, 252); border-bottom: 0; bottom: -7px; } /* Botón Golpear (móvil/alternativo) */ .reflex-hit-button { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 58%, rgb(20, 184, 166)); border: 0; border-radius: 8px; color: rgb(2, 6, 23); cursor: pointer; font-size: 0.95rem; font-weight: 950; letter-spacing: 0.02em; min-height: 48px; padding: 0.6rem 1rem; text-transform: uppercase; transition: transform 150ms ease, opacity 150ms ease, filter 150ms ease; width: 100%; } .reflex-hit-button:hover:not(:disabled) { transform: translateY(-1px); } .reflex-hit-button:active:not(:disabled) { transform: translateY(1px) scale(0.99); } .reflex-hit-button:disabled { cursor: default; filter: grayscale(0.7); opacity: 0.45; } .reflex-hint { align-items: center; color: rgb(148, 163, 184); display: flex; flex-wrap: wrap; font-size: 0.74rem; font-weight: 700; gap: 0.45rem; justify-content: center; margin: 0; } /* Overlays (inicio / game over): modal fijo centrado sobre toda la pantalla, igual que el aviso de entrada al juego. Nunca dentro del flujo del layout. */ /* Igual que .game-entry-overlay/.game-entry-backdrop: el fondo oscuro que bloquea el juego vive en un elemento APARTE (.reflex-overlay-backdrop) con z-index menor que el footer y los botones de la cabecera, para que ambos sigan siendo clicables aunque esta ventana esté abierta. .reflex-overlay ahora es solo el posicionador de la tarjeta: no bloquea nada por sí mismo. */ .reflex-overlay { align-items: center; display: flex; inset: 0; justify-content: center; padding: 1rem; pointer-events: none; position: fixed; z-index: 190; } .reflex-overlay.hidden { display: none; } .reflex-overlay-backdrop { background: rgba(2, 6, 23, 0.74); backdrop-filter: blur(8px); inset: 0; pointer-events: auto; position: fixed; z-index: 4; } .reflex-overlay-backdrop.hidden { display: none; } /* La plantilla de juegos fuerza `position: relative` en los hijos directos de .reflex-stage (regla "body[data-active-game] .reflex-stage > *"); esta regla más específica garantiza que los overlays sigan siendo modales fijos. */ body[data-active-game] .reflex-stage > .reflex-overlay { position: fixed; z-index: 190; } .reflex-overlay-card { animation: racketResultPop 360ms ease both; background: rgba(15, 23, 42, 0.82); border: 1px solid rgba(253, 224, 71, 0.28); border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); max-width: 380px; padding: clamp(1rem, 3vw, 1.6rem); pointer-events: auto; text-align: center; width: 100%; } .reflex-overlay--over .reflex-overlay-card { border-color: rgba(74, 222, 128, 0.34); } .foto-overlay--lost .reflex-overlay-card { border-color: rgba(148, 163, 184, 0.3); } .foto-overlay--lost .reflex-overlay-eyebrow { color: rgb(148, 163, 184); } .reflex-overlay-eyebrow { color: rgb(125, 211, 252); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.04em; margin: 0 0 0.4rem; text-transform: uppercase; } .reflex-over-eyebrow { color: rgb(248, 113, 113); } .reflex-overlay-card h2 { color: rgb(248, 250, 252); font-size: clamp(1.3rem, 4vw, 1.85rem); line-height: 1.05; margin: 0 0 0.55rem; } .reflex-overlay-text { color: rgb(203, 213, 225); font-size: clamp(0.82rem, 1.5vw, 0.95rem); line-height: 1.5; margin: 0 0 1.1rem; } .reflex-over-stats { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.1rem; } .reflex-over-stats div { background: rgba(2, 6, 23, 0.55); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; display: grid; gap: 0.2rem; padding: 0.55rem; } .reflex-over-stats span { color: rgb(148, 163, 184); font-size: 0.6rem; font-weight: 950; text-transform: uppercase; } .reflex-over-stats strong { color: rgb(248, 250, 252); font-size: 1.35rem; font-weight: 950; } .reflex-primary-button { align-items: center; background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 58%, rgb(20, 184, 166)); border: 0; border-radius: 8px; color: rgb(2, 6, 23); cursor: pointer; display: inline-flex; gap: 0.5rem; justify-content: center; font-size: 0.92rem; font-weight: 950; letter-spacing: 0.02em; min-height: 46px; padding: 0.6rem 1.6rem; text-transform: uppercase; transition: transform 150ms ease, filter 150ms ease; width: 100%; } .reflex-primary-button:hover:not(:disabled) { transform: translateY(-1px); } .reflex-primary-button:active:not(:disabled) { transform: translateY(1px) scale(0.99); } .reflex-primary-button:disabled { cursor: not-allowed; filter: grayscale(0.65); opacity: 0.5; } .reflex-primary-button.is-locked { background: linear-gradient(135deg, rgb(71, 85, 105), rgb(51, 65, 85) 60%, rgb(30, 41, 59)); color: rgb(226, 232, 240); filter: none; opacity: 0.85; } .reflex-lock-icon { align-items: center; display: none; height: 1.05em; justify-content: center; width: 1.05em; } .reflex-lock-icon svg { height: 100%; width: 100%; } .reflex-primary-button.is-locked .reflex-lock-icon { display: inline-flex; } .reflex-auth-actions { display: grid; gap: 0.55rem; grid-template-columns: minmax(0, 1fr); } .reflex-secondary-button { background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 8px; color: rgb(226, 232, 240); cursor: pointer; font-size: 0.84rem; font-weight: 900; min-height: 44px; padding: 0.58rem 1rem; text-transform: uppercase; transition: transform 150ms ease, border-color 150ms ease; width: 100%; } .reflex-secondary-button:hover { border-color: rgba(125, 211, 252, 0.5); transform: translateY(-1px); } .reflex-secondary-button:active { transform: translateY(1px) scale(0.99); } .reflex-secondary-button:focus-visible { outline: 2px solid rgb(125, 211, 252); outline-offset: 2px; } .reflex-primary-button:focus-visible, .reflex-hit-button:focus-visible { outline: 2px solid rgb(125, 211, 252); outline-offset: 2px; } .reflex-attempts-note { color: rgb(148, 163, 184); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.01em; margin: 0.75rem 0 0; min-height: 1em; } .reflex-attempts-note.is-locked { color: rgb(251, 191, 36); } /* ============================================= FOTOPADEL — "¿Quién es?" ============================================= */ .foto-circuit-tabs { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 auto; max-width: 420px; width: 100%; } .foto-circuit-tab { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 8px; color: rgb(203, 213, 225); cursor: pointer; font-size: 0.8rem; font-weight: 900; min-height: 40px; padding: 0.5rem 0.7rem; text-transform: uppercase; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .foto-circuit-tab.is-active { background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(20, 184, 166, 0.22)); border-color: rgba(253, 224, 71, 0.55); color: rgb(253, 224, 71); } .foto-stage.is-hidden { display: none; } .foto-photo-frame { aspect-ratio: 4 / 3; background: rgb(2, 6, 23); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; margin: 0 auto; max-width: 420px; overflow: hidden; position: relative; width: 100%; } .foto-photo-frame img { display: block; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms ease; width: 100%; } .foto-photo-frame img.is-visible { opacity: 1; } .foto-photo-placeholder { align-items: center; color: rgba(148, 163, 184, 0.5); display: flex; height: 48px; inset: 0; justify-content: center; position: absolute; width: 48px; margin: auto; } .foto-photo-placeholder svg { height: 100%; width: 100%; } .foto-level-dots { bottom: 0.55rem; display: flex; gap: 0.3rem; justify-content: center; left: 0; position: absolute; right: 0; } .foto-level-dot { background: rgba(148, 163, 184, 0.4); border-radius: 999px; height: 7px; width: 7px; } .foto-level-dot.is-seen { background: rgb(20, 184, 166); } .foto-level-dot.is-active { background: rgb(253, 224, 71); box-shadow: 0 0 12px rgba(253, 224, 71, 0.5); } .foto-guess-row label { color: rgb(226, 232, 240); display: block; font-size: 0.86rem; font-weight: 900; margin-bottom: 0.5rem; } .foto-candidates { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 480px) { .foto-candidates { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .foto-candidate-pill { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; color: rgb(248, 250, 252); cursor: pointer; font-size: 0.84rem; font-weight: 800; min-height: 44px; padding: 0.55rem 0.9rem; text-align: center; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .foto-candidate-pill:hover:not(:disabled) { border-color: rgba(253, 224, 71, 0.6); transform: translateY(-1px); } .foto-candidate-pill:disabled { cursor: not-allowed; } .foto-candidate-pill.is-wrong { background: rgba(15, 23, 42, 0.4); border-color: rgba(148, 163, 184, 0.14); color: rgb(100, 116, 139); text-decoration: line-through; } .foto-over-player { color: rgb(203, 213, 225); font-size: 0.86rem; font-weight: 800; margin: -0.35rem 0 0.9rem; } /* Solo el header de FotoPadel necesita position:relative (para anclar el interruptor de sonido) y un hueco reservado a ambos lados (aunque el botón solo esté a la derecha) para que el título/subtítulo centrados nunca queden debajo de él en pantallas estrechas. Se limita con :has() para no afectar al header compartido de Golpe Perfecto, que no lo lleva. */ .reflex-header:has(.foto-sound-toggle) { padding: 0 46px; position: relative; } /* Título propio en vez de reutilizar ".reflex-header h1": esa regla compartida (más la de "Reset parent h1 constraints...", pensada para los headers de otros juegos que envuelven un de logo) fuerza font-size:0 con !important. Aquí el título es texto real, así que hace falta pelear ese !important propiedad a propiedad para que se vea. */ #fotoTitle.foto-title { background: linear-gradient(135deg, rgb(254, 240, 138), rgb(245, 158, 11) 52%, rgb(20, 184, 166)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: rgb(248, 250, 252) !important; -webkit-text-fill-color: transparent !important; font-size: clamp(2.1rem, 6.8vw, 4.1rem) !important; font-weight: 950; letter-spacing: -0.01em; line-height: 1.06 !important; margin: 0 0 0.12em !important; padding-bottom: 0.06em !important; } .foto-sound-toggle { align-items: center; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(253, 230, 138, 0.34); border-radius: 999px; color: rgb(253, 230, 138); cursor: pointer; display: inline-flex; height: 38px; justify-content: center; position: absolute; right: 0; top: 0; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; width: 38px; } .foto-sound-toggle:hover { background: rgba(253, 230, 138, 0.12); border-color: rgba(253, 230, 138, 0.62); transform: translateY(-1px); } .foto-sound-toggle svg { height: 19px; width: 19px; } .foto-sound-icon-off { display: none; } .foto-sound-toggle.is-muted { color: rgb(148, 163, 184); } .foto-sound-toggle.is-muted .foto-sound-icon-on { display: none; } .foto-sound-toggle.is-muted .foto-sound-icon-off { display: block; } @keyframes reflexSwing { 0% { transform: translateX(-50%) rotate(0deg); } 35% { transform: translateX(-50%) rotate(var(--swing-rotate, -9deg)) translateY(var(--swing-lift, -4px)); } 100% { transform: translateX(-50%) rotate(0deg); } } @keyframes reflexFeedbackPop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.85); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.06); } 72% { opacity: 1; transform: translate(-50%, -10px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -22px) scale(0.96); } } @keyframes reflexShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } @media (max-width: 639px) { .game-actions-slot { left: 0.7rem; right: 0.7rem; top: calc(64px + max(0.58rem, env(safe-area-inset-top))); z-index: 320; } .game-actions-slot .header-actions { background: rgba(4, 6, 18, 0.78); border: 1px solid rgba(245, 158, 11, 0.14); border-radius: 999px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); display: flex; flex-wrap: nowrap; gap: 0.35rem; justify-content: center; margin: 0 auto; max-width: min(100%, 430px); padding: 0.28rem; width: fit-content; } .game-actions-slot .header-share-button, .game-actions-slot .profile-button, .game-actions-slot .logout-button { font-size: 0.64rem; min-height: 31px; padding: 0.44rem 0.55rem; } .game-actions-slot .language-button { font-size: 0.64rem; min-height: 29px; padding: 0.4rem 0.5rem; } .game-actions-slot .language-switch { padding: 2px; } .app-shell, .racket-shell, .venue-shell, .memory-shell, .reflex-shell, .ranking-shell { padding-top: calc(64px + 3.55rem + env(safe-area-inset-top)) !important; } .reflex-shell { padding-left: 0.7rem; padding-right: 0.7rem; padding-bottom: 1rem; } .reflex-header h1 { font-size: clamp(2rem, 11vw, 3rem); line-height: 1.08; padding-bottom: 0.1em; } .reflex-court { height: clamp(270px, 44vh, 380px); } .reflex-hit-button { min-height: 54px; } } @media (max-width: 380px) { .reflex-scoreboard span { font-size: 0.5rem; } .reflex-scoreboard strong { font-size: 0.9rem; } .reflex-court { height: clamp(230px, 40vh, 320px); } } @media (prefers-reduced-motion: reduce) { .reflex-ball.is-dropping, .reflex-ball.is-rising, .reflex-ball.is-bouncing, .reflex-ball.is-missed { transition-duration: 200ms; } .reflex-racket.is-swing, .reflex-stage.is-shake, .reflex-overlay-card { animation-duration: 120ms; } } /* ===== Ranking global ===== */ .ranking-shell { margin: 0 auto; max-width: 1080px; min-height: 100svh; padding: clamp(1rem, 2.4vw, 2rem) clamp(0.9rem, 2vw, 1.5rem) 1.5rem calc(var(--nav-rail-w) + clamp(0.9rem, 2vw, 1.5rem)); position: relative; z-index: 1; } .ranking-game { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); } .ranking-header { margin: 0 auto; max-width: 720px; text-align: center; } .ranking-kicker { color: rgb(125, 211, 252); display: block; font-size: 0.78rem; font-weight: 950; letter-spacing: 0.16em; margin-bottom: 0.35rem; text-transform: uppercase; } .ranking-header h1 { color: rgb(248, 250, 252); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 950; line-height: 1.02; margin: 0; } .ranking-subtitle { color: rgb(203, 213, 225); font-size: clamp(0.95rem, 1.9vw, 1.12rem); font-weight: 600; line-height: 1.5; margin: 0.9rem auto 0; max-width: 560px; } .ranking-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .ranking-tab { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 999px; color: rgb(203, 213, 225); cursor: pointer; font-size: clamp(0.78rem, 1.6vw, 0.92rem); font-weight: 900; padding: 0.55rem 1.05rem; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; } .ranking-tab:hover { border-color: rgba(253, 224, 71, 0.45); transform: translateY(-1px); } .ranking-tab-active { background: linear-gradient(135deg, rgba(253, 224, 71, 0.95), rgba(250, 204, 21, 0.92)); border-color: transparent; color: rgb(8, 13, 25); } .ranking-panel { background: linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(8, 13, 25, 0.92)), radial-gradient(circle at 94% 8%, rgba(253, 224, 71, 0.12), transparent 24%); border: 1px solid rgba(251, 191, 36, 0.22); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); margin: 0 auto; max-width: 760px; padding: clamp(0.85rem, 2vw, 1.4rem); width: 100%; } .ranking-status { color: rgb(148, 163, 184); font-size: 0.95rem; font-weight: 700; margin: 0; padding: 1.6rem 0.5rem; text-align: center; } .ranking-low-banner { align-items: center; background: rgba(253, 224, 71, 0.08); border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 12px; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.1rem; padding: 1.1rem 1.3rem; text-align: center; } .ranking-low-banner p { color: rgb(226, 232, 240); font-size: 0.95rem; font-weight: 700; line-height: 1.5; margin: 0; max-width: 520px; } .ranking-low-banner-cta { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71) 60%); border-radius: 999px; color: rgb(4, 8, 16); cursor: pointer; display: inline-block; font-size: 0.85rem; font-weight: 950; padding: 0.65rem 1.4rem; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; } .ranking-low-banner-cta:hover { box-shadow: 0 8px 22px rgba(245, 158, 11, 0.35); transform: translateY(-1px); } .game-info-section { background: linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(8, 13, 25, 0.92)); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; margin: 2rem auto 0; max-width: 720px; padding: 1.5rem 1.75rem; } .game-info-section h2 { color: rgb(253, 224, 71); font-size: 1.25rem; font-weight: 900; margin: 0 0 0.85rem; /* La barra superior fija (aviso/marquesina) tapa lo que llegue justo al borde del scroll, así que sumamos su altura (0 si no hay barra). */ scroll-margin-top: calc(var(--top-bar-height, 0px) + 1rem); } .points-table-title { color: rgb(253, 224, 71); font-size: 1rem; font-weight: 900; margin: 1.25rem 0 0.75rem; } .game-info-section h3 { color: rgb(253, 224, 71); font-size: 1rem; font-weight: 900; margin: 1.25rem 0 0.75rem; } .game-info-section ul { color: rgb(203, 213, 225); font-size: 0.92rem; line-height: 1.65; margin: 0 0 0.9rem; padding-left: 1.15rem; } .game-info-section li { margin-bottom: 0.5rem; } .game-info-section li:last-child { margin-bottom: 0; } .game-info-section a { color: rgb(253, 224, 71); font-weight: 700; } .game-info-section.home-info-section { max-width: 860px; padding: 2rem clamp(1.25rem, 4vw, 2.25rem); } .home-info-eyebrow { color: rgb(253, 230, 138); font-size: 0.78rem; font-weight: 950; letter-spacing: 0.14em; margin: 0 0 0.4rem; text-transform: uppercase; } .home-info-section h2 { font-size: clamp(1.35rem, 3vw, 1.65rem); } .home-info-section > p:first-of-type { font-size: 1rem; } .home-game-cards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0 0 1.5rem; } .home-game-card { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: inherit; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.3rem 1.1rem; text-align: center; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .home-game-card:hover, .home-game-card:focus-visible { background: rgba(253, 224, 71, 0.09); border-color: rgba(253, 224, 71, 0.32); transform: translateY(-3px); } .home-game-card-logo { height: 40px; margin: 0 auto; object-fit: contain; width: auto; } .home-game-card strong { color: rgb(253, 224, 71); font-size: 1rem; font-weight: 900; } .home-game-card p { color: rgb(203, 213, 225); font-size: 0.82rem; line-height: 1.55; margin: 0; } .home-game-card-cta { color: rgb(253, 230, 138); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.04em; margin-top: auto; text-transform: uppercase; } .points-table { border-collapse: collapse; width: 100%; } .points-table th, .points-table td { border-bottom: 1px solid rgba(148, 163, 184, 0.18); padding: 0.5rem 0.75rem; text-align: left; } .points-table th { color: rgb(148, 163, 184); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .points-table td { color: rgb(226, 232, 240); font-size: 0.9rem; font-weight: 700; } .points-table th:last-child, .points-table td:last-child { color: rgb(245, 158, 11); text-align: right; } .points-table-note { color: rgb(148, 163, 184); font-size: 0.8rem; line-height: 1.4; margin-top: 0.75rem; } @media (max-width: 639px) { .game-info-section h2 { /* En móvil el side-nav pasa a ser cabecera horizontal fija de 64px (mismo valor que usa .game-actions-slot más abajo en este archivo). */ scroll-margin-top: calc(var(--top-bar-height, 0px) + 64px + 1rem); } } .game-info-section p { color: rgb(203, 213, 225); font-size: 0.92rem; line-height: 1.65; margin: 0 0 0.9rem; } .game-info-section p:last-child { margin-bottom: 0; } .hints-card { margin: 0 0 1rem; } .hints-label { color: rgb(148, 163, 184); font-size: 0.8rem; font-weight: 700; margin: 0 0 0.5rem; } .hints-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .hint-button { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; color: rgb(226, 232, 240); cursor: pointer; font-size: 0.78rem; font-weight: 800; padding: 0.45rem 0.85rem; transition: border-color 180ms ease, background 180ms ease; } .hint-button:hover:not(:disabled) { border-color: rgba(253, 224, 71, 0.5); } .hint-button:disabled { cursor: default; opacity: 0.45; } .hint-cost { color: rgb(251, 191, 36); font-weight: 900; } /* Solo la pista YA REVELADA lleva el estilo verde y oculta el coste; una pista bloqueada por el límite de 3 se ve simplemente atenuada, con su coste visible, para no confundirla con una revelada rota. */ .hint-button-revealed:disabled { background: rgba(34, 197, 94, 0.28); border-color: rgb(34, 197, 94); border-width: 1.5px; color: rgb(220, 252, 231); font-weight: 900; opacity: 1; } .hint-button-revealed:disabled .hint-cost { display: none; } .hints-feedback { color: rgb(148, 163, 184); font-size: 0.8rem; margin: 0.5rem 0 0; min-height: 1.1rem; } .ranking-table-shell { overflow-x: auto; } .ranking-table { border-collapse: collapse; width: 100%; } .ranking-table thead th { border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: rgb(253, 230, 138); font-size: 0.68rem; font-weight: 950; letter-spacing: 0.08em; padding: 0.55rem 0.7rem; text-align: left; text-transform: uppercase; } .ranking-table .ranking-col-pos { text-align: center; width: 56px; } .ranking-table .ranking-col-main, .ranking-table .ranking-col-extra { text-align: right; white-space: nowrap; } .ranking-table tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgb(226, 232, 240); font-size: 0.92rem; font-weight: 700; padding: 0.6rem 0.7rem; vertical-align: middle; } .ranking-table tbody td.ranking-col-main { color: rgb(248, 250, 252); font-weight: 950; } .ranking-row:hover td { background: rgba(255, 255, 255, 0.03); } .ranking-table tbody td.ranking-col-name { white-space: nowrap; } .ranking-avatar { align-items: center; background: rgba(148, 163, 184, 0.16); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; display: inline-flex; flex: 0 0 auto; height: 28px; justify-content: center; margin-right: 0.55rem; overflow: hidden; vertical-align: middle; width: 28px; } .ranking-avatar img { display: block; height: 100%; object-fit: cover; width: 100%; } .ranking-avatar-initials { color: rgb(226, 232, 240); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.02em; } .ranking-name { font-weight: 800; vertical-align: middle; } .ranking-medal { align-items: center; border-radius: 999px; color: rgb(8, 13, 25); display: inline-flex; font-size: 0.8rem; font-weight: 950; height: 26px; justify-content: center; width: 26px; } .ranking-medal-1 { background: linear-gradient(135deg, #fde68a, #f59e0b); } .ranking-medal-2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); } .ranking-medal-3 { background: linear-gradient(135deg, #fcd9a8, #d08b45); } .ranking-row-self td { background: rgba(253, 224, 71, 0.1); } .ranking-you-tag { background: rgba(253, 224, 71, 0.2); border-radius: 999px; color: rgb(253, 224, 71); font-size: 0.6rem; font-weight: 950; letter-spacing: 0.06em; margin-left: 0.5rem; padding: 0.12rem 0.42rem; text-transform: uppercase; } .ranking-table.ranking-hide-extra .ranking-col-extra { display: none; } @media (max-width: 760px) { .ranking-shell { padding-top: 4.35rem; } } .game-entry-overlay .game-entry-countdown { color: rgb(251, 191, 36); } /* Premium, low-noise background for mini-game interfaces. */ body[data-active-game] { background: radial-gradient(ellipse 48% 28% at 15% 4%, rgba(20, 184, 166, 0.08), transparent 62%), radial-gradient(ellipse 36% 22% at 88% 8%, rgba(245, 158, 11, 0.075), transparent 66%), radial-gradient(ellipse 64% 42% at 50% 118%, rgba(7, 33, 52, 0.52), transparent 68%), linear-gradient(152deg, rgb(2, 5, 12) 0%, rgb(4, 10, 22) 42%, rgb(2, 6, 18) 74%, rgb(3, 8, 15) 100%); color: rgb(248, 250, 252); min-height: 100svh; } body[data-active-game]::before { background: linear-gradient(90deg, transparent 0 9%, rgba(253, 224, 71, 0.04) 9.08% 9.18%, transparent 9.28% 90.72%, rgba(20, 184, 166, 0.038) 90.82% 90.92%, transparent 91%), linear-gradient(0deg, transparent 0 13%, rgba(255, 255, 255, 0.026) 13.05% 13.14%, transparent 13.26% 86.74%, rgba(255, 255, 255, 0.024) 86.86% 86.95%, transparent 87%), linear-gradient(90deg, transparent 0 49.94%, rgba(20, 184, 166, 0.028) 49.98% 50.02%, transparent 50.06%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 12px), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 12px); background-size: 100% 100%, 100% 100%, 100% 100%, 18px 18px, 18px 18px; content: ""; inset: 0; opacity: 0.44; pointer-events: none; position: fixed; z-index: -2; } body[data-active-game]::after, body.racket-page::after, body.memory-page::after { background: linear-gradient(135deg, transparent 0 16%, rgba(253, 224, 71, 0.028) 16.08% 16.16%, transparent 16.24%), linear-gradient(135deg, transparent 83.76%, rgba(20, 184, 166, 0.03) 83.84% 83.92%, transparent 84%), radial-gradient(ellipse 28% 18% at 6% 7%, rgba(253, 224, 71, 0.045), transparent 70%), radial-gradient(ellipse 26% 18% at 95% 9%, rgba(20, 184, 166, 0.04), transparent 72%), radial-gradient(ellipse 45% 36% at 50% 46%, rgba(0, 0, 0, 0.2), transparent 58%); background-position: center; background-repeat: no-repeat; background-size: auto; content: ""; filter: none; inset: 0; opacity: 1; pointer-events: none; position: fixed; z-index: -1; } body[data-active-game] .gold-shavings { display: none; } body[data-active-game] .app-shell, body[data-active-game] .racket-shell, body[data-active-game] .venue-shell, body[data-active-game] .memory-shell, body[data-active-game] .reflex-shell, body[data-active-game] .ranking-shell { isolation: isolate; position: relative; z-index: 2; } body[data-active-game] .game-column, body[data-active-game] .racket-stage, body[data-active-game] .memory-panel, body[data-active-game] .reflex-stage, body[data-active-game] .venue-photo-card, body[data-active-game] .venue-answer, body[data-active-game] .ranking-panel { position: relative; } body[data-active-game="padle"] .game-column, body[data-active-game] .ranking-panel { background: linear-gradient(145deg, rgba(8, 14, 27, 0.92), rgba(2, 6, 18, 0.97)), linear-gradient(90deg, rgba(253, 224, 71, 0.06), transparent 26%, transparent 74%, rgba(20, 184, 166, 0.055)); border: 1px solid rgba(226, 232, 240, 0.12); border-radius: 8px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04); } body[data-active-game] .racket-stage, body[data-active-game] .memory-panel, body[data-active-game] .reflex-stage { background: transparent; border-color: rgba(226, 232, 240, 0.13); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.035); } body[data-active-game="padle"] .game-column { padding: clamp(0.75rem, 1.8vw, 1.1rem); } body[data-active-game="padle"] .game-column::before, body[data-active-game] .racket-stage::before, body[data-active-game] .memory-panel::before, body[data-active-game] .reflex-stage::before, body[data-active-game] .ranking-panel::before { background: linear-gradient(90deg, rgba(253, 224, 71, 0.46), rgba(20, 184, 166, 0.24), transparent 34%) top left / 42% 1px no-repeat, linear-gradient(270deg, rgba(20, 184, 166, 0.36), rgba(253, 224, 71, 0.18), transparent 34%) top right / 42% 1px no-repeat, linear-gradient(180deg, rgba(253, 224, 71, 0.28), transparent 30%) top left / 1px 32% no-repeat, linear-gradient(180deg, rgba(20, 184, 166, 0.25), transparent 30%) top right / 1px 32% no-repeat; border-radius: inherit; content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 0; } body[data-active-game="padle"] .game-column > *, body[data-active-game] .racket-stage > *, body[data-active-game] .memory-panel > *, body[data-active-game] .reflex-stage > *, body[data-active-game] .ranking-panel > * { position: relative; z-index: 1; } body[data-active-game="padle"] .search-card, body[data-active-game] .racket-search-card { position: relative; z-index: 20; } body[data-active-game="padle"] .attribute-header, body[data-active-game="padle"] #attempts, body[data-active-game] .racket-table-shell, body[data-active-game] .memory-toolbar, body[data-active-game] .memory-stats, body[data-active-game] .memory-board, body[data-active-game] .reflex-scoreboard, body[data-active-game] .reflex-court, body[data-active-game] .reflex-precision, body[data-active-game] .reflex-hit-button, body[data-active-game] .venue-answer, body[data-active-game] .venue-photo-card { position: relative; z-index: 3; } body[data-active-game="padle"] .suggestions-list, body[data-active-game] .racket-suggestions, body[data-active-game] .venue-suggestions { z-index: 80; } body[data-active-game] .rules-panel, body[data-active-game] .search-card, body[data-active-game] .reflex-scoreboard article, body[data-active-game] .memory-stats article, body[data-active-game] .pair-overview-card, body[data-active-game] .ranking-tab { background-color: rgba(10, 17, 31, 0.72); border-color: rgba(148, 163, 184, 0.18); } /* ─── ESTILOS PREMIUM RETOPADEL ─── */ :root { /* Tonalidad anaranjada premium (Sunset Orange / Electric Copper) */ --gold: rgb(255, 140, 0) !important; /* Naranja vibrante principal */ --gold-deep: rgb(220, 80, 0) !important; /* Naranja profundo para contraste */ --cyan: rgb(0, 210, 255) !important; /* Azul cian metálico */ } /* Tipografía general del sitio: Inter para texto, Bebas Neue para titulares */ body, input, button, select, textarea { font-family: 'Inter', sans-serif !important; } h1, h2, h3, h4, h5, h6, .title-lockup, .footer-heading, .section-heading h2 { font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.01em !important; } /* Titular de alto impacto (portadas, hero, banners grandes) */ .titulares { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; font-size: 5rem; line-height: 0.9; } /* Texto descriptivo pequeño y elegante */ .texto-pequeno { font-family: 'Inter', sans-serif; font-weight: 300; color: #cccccc; } /* Cambiar tonalidad de los botones principales (Naranjas Sunset Premium) */ .primary-action, .profile-save-button, .notify-form button, .contact-submit, .btn-baja, .cookie-consent-accept, .venue-submit { background: linear-gradient(135deg, var(--gold-deep), var(--gold)) !important; color: #040810 !important; font-weight: 800 !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(255, 110, 0, 0.25) !important; transition: all 200ms ease !important; border: none !important; } .primary-action:hover, .profile-save-button:hover, .notify-form button:hover, .contact-submit:hover:not(:disabled), .btn-baja:hover, .cookie-consent-accept:hover, .venue-submit:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 110, 0, 0.38) !important; filter: brightness(1.1) !important; } /* Botón de cambiar idioma activo en tono anaranjado */ .language-button-active { background: var(--gold) !important; color: #040810 !important; transform: translateY(-1px) !important; } /* Títulos y subtítulos degradados premium */ /* Quitar recuadro tosco azul oscuro y aplicar difuminado glassmorphism premium */ body[data-active-game="padle"] .game-column, body[data-active-game] .ranking-panel, body[data-active-game] .racket-stage, body[data-active-game] .memory-panel, body[data-active-game] .reflex-stage, body[data-active-game] .venue-photo-card, body[data-active-game] .venue-answer { background: rgba(8, 14, 27, 0.58) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36) !important; } /* Evitar que los bordes decorativos molestos tomen colores extraños */ body[data-active-game="padle"] .game-column::before, body[data-active-game] .racket-stage::before, body[data-active-game] .memory-panel::before, body[data-active-game] .reflex-stage::before, body[data-active-game] .ranking-panel::before { background: linear-gradient(90deg, var(--gold), var(--cyan), transparent 34%) top left / 42% 1px no-repeat, linear-gradient(270deg, var(--cyan), var(--gold), transparent 34%) top right / 42% 1px no-repeat, linear-gradient(180deg, var(--gold), transparent 30%) top left / 1px 32% no-repeat, linear-gradient(180deg, var(--cyan), transparent 30%) top right / 1px 32% no-repeat !important; } /* ─── GARANTÍA DE MENÚS E IDENTIDAD DE BOTÓN IDÉNTICOS ─── */ .profile-alert { background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 25, 0.98)), radial-gradient(circle at 92% 8%, rgba(255, 140, 0, 0.18), transparent 24%) !important; border: 1px solid rgba(255, 140, 0, 0.36) !important; border-radius: 8px !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 36px rgba(255, 140, 0, 0.12) !important; max-height: min(82vh, 760px) !important; max-width: 420px; overflow-y: auto; padding: 1.5rem; position: relative; width: min(100%, 420px); } .profile-save-button { background: linear-gradient(135deg, rgb(220, 80, 0), rgb(255, 140, 0)) !important; border: 0 !important; border-radius: 8px !important; color: #040810 !important; cursor: pointer !important; font-size: 0.94rem !important; font-weight: 950 !important; margin-top: 1.2rem !important; min-height: 46px !important; width: 100% !important; transition: filter 180ms ease, transform 180ms ease !important; } .profile-save-button:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; } /* ─── GARANTÍA ABSOLUTA DE COLORES DE TABS Y MODALES IDÉNTICOS ─── */ .auth-tab-active { background: rgb(255, 140, 0) !important; color: rgb(17, 24, 39) !important; } .auth-tabs { background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .auth-tab { color: rgb(203, 213, 225) !important; } .consent-row input { accent-color: rgb(255, 140, 0) !important; } /* ─── ENFOQUE TABS CON TEXTO NEGRO PURO AL SELECCIONAR ─── */ .auth-tab-active { background: rgb(255, 140, 0) !important; color: #000000 !important; } .auth-tab { background: transparent !important; color: rgb(203, 213, 225) !important; } /* ─── CORRECCIÓN ESPECIFICIDAD DE PESTAÑAS (NARANJA Y TEXTO NEGRO) ─── */ .auth-tab { background: transparent !important; color: rgb(203, 213, 225) !important; } .auth-tab.auth-tab-active { background: rgb(255, 140, 0) !important; color: #000000 !important; } /* ─── ESTILOS EXACTOS DE REGISTRO CONSENT-ROW Y TIPOGRAFÍA DE MODAL ─── */ .profile-alert, .profile-alert span, .profile-alert label, .profile-alert input, .profile-alert button { font-family: 'Inter', sans-serif !important; } .consent-row { align-items: flex-start !important; color: rgb(203, 213, 225) !important; display: flex !important; gap: 0.55rem !important; font-size: 0.78rem !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0.95rem 0 !important; text-align: left !important; } .consent-row input { margin-top: 0.15rem !important; flex-shrink: 0 !important; } /* ─── CAMBIO A TONALIDAD AMARILLO DORADO PREMIUM ─── */ :root { --gold: rgb(253, 224, 71) !important; /* Amarillo dorado brillante */ --gold-deep: rgb(245, 158, 11) !important; /* Amarillo dorado profundo/ámbar */ } .primary-action, .profile-save-button, .notify-form button, .contact-submit, .btn-baja, .cookie-consent-accept, .venue-submit { background: linear-gradient(135deg, var(--gold-deep), var(--gold)) !important; color: #040810 !important; box-shadow: 0 4px 15px rgba(253, 224, 71, 0.2) !important; } .primary-action:hover, .profile-save-button:hover, .notify-form button:hover, .contact-submit:hover:not(:disabled), .btn-baja:hover, .cookie-consent-accept:hover, .venue-submit:hover { box-shadow: 0 6px 20px rgba(253, 224, 71, 0.35) !important; } .profile-alert { border: 1px solid rgba(253, 224, 71, 0.28) !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 36px rgba(253, 224, 71, 0.08) !important; background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 25, 0.98)), radial-gradient(circle at 92% 8%, rgba(253, 224, 71, 0.12), transparent 24%) !important; } .auth-tab.auth-tab-active { background: var(--gold) !important; color: #000000 !important; } .consent-row input { accent-color: var(--gold) !important; } /* Contenedor de controles de cabecera en PaDLE */ .padle-header-controls { display: flex !important; justify-content: center !important; align-items: center !important; gap: 2.2rem !important; margin-top: 1.4rem !important; flex-wrap: wrap !important; } .padle-header-controls .padle-subtitle { margin: 0 !important; } .padle-header-controls .pair-instructions-button { margin-top: 0 !important; } /* ══════════════════════════════════════════════════════════════ GAME-ENTRY "CÓMO SE JUEGA" BUTTON – professional ghost style ══════════════════════════════════════════════════════════════ */ .game-entry-how-to-play { align-items: center; background: transparent; border: 1.5px solid rgba(253, 224, 71, 0.30); border-radius: 9px; color: rgb(253, 224, 71); cursor: pointer; display: inline-flex; font-size: 0.82rem; font-weight: 700; gap: 0.45rem; justify-content: center; letter-spacing: 0.04em; margin-top: 0.65rem; min-height: 40px; padding: 0.45rem 1.2rem; text-transform: uppercase; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; width: 100%; } .game-entry-how-to-play:hover { background: rgba(253, 224, 71, 0.10); border-color: rgba(253, 224, 71, 0.65); color: rgb(255, 235, 120); transform: translateY(-1px); } .game-entry-how-to-play:active { transform: translateY(1px) scale(0.99); } .game-entry-how-to-play:focus-visible { outline: 2px solid rgb(253, 224, 71); outline-offset: 2px; } .game-entry-how-icon { flex-shrink: 0; height: 1.1em; width: 1.1em; } /* Enlace "Cómo se juega" bajo el logo (PaDLE/ParejLE) que baja con scroll suave hasta el bloque .game-info-section del final de la página. */ .jump-to-info-button { align-items: center; background: transparent; border: 1.5px solid rgba(253, 224, 71, 0.30); border-radius: 9px; color: rgb(253, 224, 71); cursor: pointer; display: inline-flex; font-size: 0.78rem; font-weight: 700; gap: 0.4rem; justify-content: center; letter-spacing: 0.04em; margin: 0.6rem auto 0; padding: 0.4rem 1.1rem; text-transform: uppercase; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .jump-to-info-button:hover { background: rgba(253, 224, 71, 0.10); border-color: rgba(253, 224, 71, 0.65); color: rgb(255, 235, 120); transform: translateY(-1px); } .jump-to-info-button:active { transform: translateY(1px) scale(0.99); } .jump-to-info-button:focus-visible { outline: 2px solid rgb(253, 224, 71); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════ GAME HEADER LOGOS – definitivo, grande, centrado ══════════════════════════════════════════════════════════════ */ .game-header-logo { display: block !important; height: auto !important; margin: 0 auto -0.65rem auto !important; max-height: 290px !important; max-width: min(90vw, 560px) !important; width: min(90vw, 560px) !important; object-fit: contain !important; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55)) !important; } /* Reset parent h1 constraints so they don't clip the image */ .padle-logo-wrap, .racket-logo-wrap, .venue-heading, .memory-header h1, .reflex-header h1 { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; } /* ══════════════════════════════════════════════════════════════ GAME-ENTRY GUEST NOTICE ══════════════════════════════════════════════════════════════ */ .game-entry-guest-notice { align-items: flex-start; border-top: 1px solid rgba(255, 255, 255, 0.07); color: rgb(148, 163, 184); display: flex; font-size: 0.76rem; font-weight: 500; gap: 0.38rem; line-height: 1.45; margin: 0.9rem 0 0; padding-top: 0.75rem; text-align: left; flex-wrap: wrap; } .game-entry-guest-notice.hidden { display: none !important; } .game-entry-guest-icon { flex-shrink: 0; height: 0.95em; margin-top: 0.12em; opacity: 0.7; width: 0.95em; } .game-entry-guest-text { flex: 1 1 0; min-width: 0; } .game-entry-guest-login { background: none; border: none; color: rgb(253, 224, 71); cursor: pointer; font-size: inherit; font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 2px; transition: color 140ms ease, opacity 140ms ease; white-space: nowrap; } .game-entry-guest-login:hover { color: rgb(255, 245, 150); opacity: 0.9; } .game-entry-guest-login:focus-visible { outline: 2px solid rgb(253, 224, 71); outline-offset: 2px; border-radius: 2px; } /* Títulos y subtítulos premium */ .padle-subtitle { color: var(--gold) !important; font-size: 1.4rem !important; font-weight: 400 !important; font-style: normal !important; font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; text-align: center !important; margin: -0.9rem auto 0.15rem auto !important; /* closer to logo and search card */ display: block !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; padding: 0 !important; } /* Reduce distance between logo/headers and the game board */ .venue-game, .racket-game, .memory-game, .reflex-game { gap: 0.35rem !important; } .padle-header { margin-bottom: 0.4rem !important; } /* ─── OVERRIDES DE LOGOS ESPECÍFICOS POR MINIJUEGO ─── */ /* 1. PaDLE */ .padle-logo-wrap .game-header-logo { max-width: 100% !important; width: 440px !important; height: auto !important; margin: 0 auto -0.3rem auto !important; } .padle-subtitle { margin: -0.2rem auto 0.6rem auto !important; } .padle-header { margin-bottom: 0.2rem !important; } /* 2. ParejLE */ .racket-logo-wrap .game-header-logo { max-height: 310px !important; max-width: min(92vw, 590px) !important; width: min(92vw, 590px) !important; margin-bottom: -0.9rem !important; } /* 3. GeoPadel */ .venue-heading .game-header-logo { max-width: 100% !important; width: 340px !important; height: auto !important; margin: 0 auto -1.2rem auto !important; } .venue-title-block { margin-bottom: -0.4rem !important; } /* 4. Golpe Perfecto */ .reflex-header .game-header-logo { max-height: 210px !important; max-width: min(72vw, 410px) !important; width: min(72vw, 410px) !important; margin-bottom: -0.4rem !important; } /* 5. MemoPadel */ .memory-header .game-header-logo { max-height: 290px !important; max-width: min(90vw, 560px) !important; width: min(90vw, 560px) !important; margin-bottom: -0.65rem !important; } /* Remove grey border card wrapper from GeoPadel form */ body[data-active-game] .venue-answer { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 1.1rem !important; } /* ─── AVISO SUPERIOR GLOBAL Y ESTADOS DE MANTENIMIENTO ─── */ .site-top-notice { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; box-sizing: border-box; z-index: 1000; position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); overflow: hidden; } @media (max-width: 639px) { .site-top-notice { height: 34px; font-size: 0.7rem; letter-spacing: 0.06em; } } .site-top-notice.notice-info { background: linear-gradient(90deg, #09090b 0%, #030712 50%, #09090b 100%); color: #4ade80; /* RetoPadel Neon Green */ border-bottom: 1.5px solid #22c55e; } .site-top-notice.notice-warning { background: linear-gradient(90deg, #09090b 0%, #1c1917 50%, #09090b 100%); color: #fbbf24; /* amber gold */ border-bottom: 1.5px solid #d97706; } .site-top-notice.notice-maintenance { background: linear-gradient(90deg, #090505 0%, #1c0a0a 50%, #090505 100%); color: #ef4444; /* red warning */ border-bottom: 1.5px solid #dc2626; } .site-top-notice.notice-promo { background: linear-gradient(90deg, #181307 0%, #302206 50%, #181307 100%); color: #fef08a; /* luxury gold */ border-bottom: 1.5px solid #eab308; text-shadow: 0 0 6px rgba(254, 240, 138, 0.4); } /* Menú lateral bloqueado por mantenimiento */ .game-maintenance-locked { opacity: 0.55 !important; filter: grayscale(0.5); border-left: 3px solid #f59e0b !important; } .game-maintenance-locked .sng-badge-soon { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; } /* Tarjetas de inicio en mantenimiento */ .home-menu-card-maintenance { opacity: 0.65 !important; filter: grayscale(0.6); border: 1px solid rgba(245, 158, 11, 0.25) !important; box-shadow: none !important; background: rgba(15, 23, 42, 0.3) !important; } .home-menu-card-maintenance em { color: #f59e0b !important; border-color: rgba(245, 158, 11, 0.3) !important; } /* --- STYLES FOR BANNER AND SCROLLING NOTICES --- */ .site-top-bar-container { width: 100%; display: flex; flex-direction: column; z-index: 99; position: fixed; top: 0; left: 0; } .notice-marquee-wrapper { overflow: hidden; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; } .notice-marquee { display: inline-block; white-space: nowrap; animation: marquee-scroll 35s linear infinite; /* Smooth slow animation */ padding-left: 10%; } /* La barra de aviso es puramente informativa: su contenido siempre se inserta como texto plano (ver site-nav.js), nunca lleva enlaces ni nada clicable. Por eso ignora el puntero por completo: el marquee no se detiene al pasar el cursor por encima, no cambia el cursor y no roba clics a lo que haya debajo. Antes había aquí un :hover con animation-play-state: paused. */ .site-top-notice { pointer-events: none; } @keyframes marquee-scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .site-top-banner { width: 100%; height: 220px; overflow: hidden; position: relative; background: #030712; border-bottom: 1px solid rgba(245, 158, 11, 0.2); } .banner-image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .site-banner-carousel { display: flex; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .site-banner-carousel img { width: 100%; height: 100%; flex-shrink: 0; object-fit: cover; object-position: center; display: block; } /* Tablet (Heights matching user specifications) */ @media (max-width: 1024px) { .site-top-banner { height: 170px; } } /* Mobile (Heights matching user specifications) */ @media (max-width: 639px) { .site-top-banner { height: 140px; } } /* Layout shift when top bar is present – fixed so it stays while scrolling */ .site-top-bar-container { position: fixed !important; top: 0; left: 0; width: 100%; padding-top: env(safe-area-inset-top); z-index: 99 !important; } /* Language Dropdown Styles */ .language-dropdown-container { position: relative; display: inline-block; } .language-dropdown-toggle { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 999px; color: rgb(253, 230, 138); padding: 0 0.75rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 700; font-size: 0.75rem; min-height: 31px; transition: background 0.2s, border-color 0.2s; pointer-events: auto; } .language-dropdown-toggle:hover { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.56); } .active-lang-flag { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; } .active-lang-flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .language-dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #070b16; border: 1px solid rgba(253, 224, 71, 0.25); border-radius: 12px; padding: 6px 0; width: 170px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); z-index: 1000; text-align: left; display: block; opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; } .language-dropdown-menu.hidden { display: none; opacity: 0; transform: translateY(-8px); pointer-events: none; } .lang-option { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: #94a3b8; transition: background 0.2s, color 0.2s; } .lang-option:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; } .lang-option .lang-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #475569; display: inline-block; transition: background-color 0.2s, border-color 0.2s; background-color: transparent; } .lang-option:hover .lang-dot { border-color: #94a3b8; } .lang-option.active { color: #ffffff; } .lang-option.active .lang-dot { background: #a3e635; /* Bright lime green like the mockup */ border-color: #a3e635; box-shadow: 0 0 8px rgba(163, 230, 53, 0.6); } .lang-option .lang-text { font-weight: 500; } .lang-option .lang-flag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .lang-option .lang-flag img { width: 100%; height: 100%; display: block; } .site-top-notice { z-index: 99 !important; } body.has-top-bar .side-nav { top: var(--top-bar-height, 0px) !important; height: calc(100vh - var(--top-bar-height, 0px)) !important; } /* Actions slot positioning for desktop */ body.has-top-bar .game-actions-slot { top: calc(max(0.72rem, env(safe-area-inset-top)) + var(--top-bar-offset, 0px)) !important; } body.has-top-bar .app-shell, body.has-top-bar .racket-shell, body.has-top-bar .venue-shell, body.has-top-bar .memory-shell, body.has-top-bar .reflex-shell, body.has-top-bar .ranking-shell { padding-top: 3.35rem !important; } body.has-top-bar .home-shell { padding-top: 1rem !important; padding-bottom: 11.5rem !important; } /* Actions slot and shells positioning for mobile */ @media (max-width: 639px) { body.has-top-bar .home-shell { padding-top: 1rem !important; padding-bottom: 8.5rem !important; } body.has-top-bar .game-actions-slot { top: calc(64px + max(0.58rem, env(safe-area-inset-top)) + var(--top-bar-offset, 0px)) !important; } /* En móvil el side-nav es la barra superior horizontal (64px), no el raíl vertical de escritorio — sin esto, la regla de escritorio de más abajo lo estira casi a toda la pantalla y tapa todo lo que hay debajo. */ body.has-top-bar .side-nav { height: auto !important; top: var(--top-bar-height, 0px) !important; } body.has-top-bar .app-shell, body.has-top-bar .racket-shell, body.has-top-bar .venue-shell, body.has-top-bar .memory-shell, body.has-top-bar .reflex-shell, body.has-top-bar .ranking-shell { padding-top: 5.4rem !important; } } /* --- ESTILOS DEL MODAL DE CONFIRMACIÓN PROFESIONAL --- */ .site-confirm-overlay { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; background: rgba(4, 6, 18, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 20000 !important; opacity: 0; transition: opacity 0.3s ease; } .site-confirm-overlay.confirm-visible { opacity: 1; } .confirm-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(8, 13, 28, 0.98)); border: 1px solid rgba(245, 158, 11, 0.22); border-radius: 20px; padding: 2.2rem 2rem; max-width: 400px; width: 90%; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05); text-align: center; transform: scale(0.92); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .site-confirm-overlay.confirm-visible .confirm-card { transform: scale(1); } .confirm-icon { font-size: 2.6rem; margin-bottom: 1rem; animation: confirmPulse 2s infinite ease-in-out; } @keyframes confirmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .confirm-title { color: #ffffff; margin: 0 0 0.6rem 0; font-size: 1.4rem; font-weight: 800; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; } .confirm-message { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; margin: 0 0 2rem 0; } .confirm-actions { display: flex; gap: 0.85rem; justify-content: center; } .confirm-btn-cancel, .confirm-btn-action { font-family: inherit; font-size: 0.9rem; font-weight: 700; padding: 0.75rem 1.4rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; flex: 1; } .confirm-btn-cancel { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; outline: none; } .confirm-btn-cancel:hover { background: rgba(15, 23, 42, 0.8); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; transform: translateY(-1px); } .confirm-btn-action { background: linear-gradient(135deg, #dc2626, #b91c1c); border: none; color: #ffffff; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25); outline: none; } .confirm-btn-action:hover { background: linear-gradient(135deg, #ef4444, #dc2626); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35); } .confirm-btn-cancel:active, .confirm-btn-action:active { transform: translateY(0); } /* Offset explore menu sheet when top bar notice/banner is active */ body.has-top-bar .home-menu-sheet { top: var(--top-bar-offset, 0px) !important; max-height: calc(100vh - var(--top-bar-offset, 0px)) !important; } /* --- HOME PARTICLES CANVAS --- */ .home-particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* ============================================= AVATAR CIRCULAR — HEADER ============================================= */ .profile-button--avatar { align-items: center; background: rgba(15, 23, 42, 0.72); border: 2px solid rgba(245, 158, 11, 0.55); border-radius: 50%; cursor: pointer; display: flex; height: 38px; justify-content: center; overflow: hidden; padding: 0; position: relative; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; width: 38px; min-height: 38px; } .profile-button--avatar:hover { border-color: rgba(245, 158, 11, 0.9); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), 0 4px 14px rgba(0, 0, 0, 0.4); transform: translateY(-1px) scale(1.04); } .profile-button--avatar:active { transform: translateY(0) scale(0.98); } .avatar-img { border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%; } .avatar-initials { color: rgb(253, 230, 138); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; user-select: none; } /* ============================================= PROFILE PANEL — OVERLAY & DRAWER ============================================= */ .pp-overlay { align-items: stretch; background: rgba(2, 6, 23, 0.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; inset: 0; justify-content: flex-end; position: fixed; /* Por encima del aviso/banner del admin (z-index 9999): el panel de perfil, al abrirse, debe tapar el banner en vez de quedar debajo. */ z-index: 10000; transition: opacity 320ms ease; opacity: 1; } .pp-overlay.pp-hidden { display: none; } .pp-overlay:not(.pp-visible) { opacity: 0; pointer-events: none; } .pp-overlay.pp-visible { opacity: 1; } .pp-panel { background: linear-gradient(175deg, rgba(10, 16, 38, 0.98), rgba(5, 9, 26, 0.99)), radial-gradient(ellipse 80% 40% at 90% 5%, rgba(245, 158, 11, 0.1), transparent 60%); border-left: 1px solid rgba(245, 158, 11, 0.18); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; height: 100%; max-width: 440px; outline: none; overflow: hidden; position: relative; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); width: 100%; } .pp-overlay.pp-visible .pp-panel { transform: translateX(0); } /* ─── Header ──────────────────────────────────── */ .pp-header { align-items: center; background: rgba(15, 23, 42, 0.55); border-bottom: 1px solid rgba(245, 158, 11, 0.14); display: flex; gap: 12px; justify-content: space-between; padding: 16px 18px; } .pp-header-avatar-wrap { align-items: center; display: flex; gap: 12px; min-width: 0; } .pp-header-avatar { align-items: center; background: rgba(15, 23, 42, 0.8); border: 2px solid rgba(245, 158, 11, 0.5); border-radius: 50%; display: flex; flex-shrink: 0; height: 48px; justify-content: center; overflow: hidden; width: 48px; } .pp-header-info { min-width: 0; } .pp-title { color: rgb(248, 250, 252); font-size: 1rem; font-weight: 900; letter-spacing: 0.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-subtitle { color: rgb(148, 163, 184); font-size: 0.76rem; font-weight: 700; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-close-btn { align-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: rgb(148, 163, 184); cursor: pointer; display: flex; flex-shrink: 0; height: 34px; justify-content: center; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; width: 34px; } .pp-close-btn:hover { background: rgba(244, 63, 94, 0.14); border-color: rgba(244, 63, 94, 0.4); color: rgb(248, 113, 113); transform: scale(1.08); } /* ─── Tabs ────────────────────────────────────── */ .pp-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-shrink: 0; gap: 0; overflow-x: auto; padding: 0 4px; scrollbar-width: none; } .pp-tabs::-webkit-scrollbar { display: none; } .pp-tab { align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; color: rgb(100, 116, 139); cursor: pointer; display: flex; flex-direction: column; font-size: 0.64rem; font-weight: 900; gap: 3px; letter-spacing: 0.04em; min-width: 64px; padding: 10px 8px 8px; text-transform: uppercase; transition: border-color 180ms ease, color 180ms ease; white-space: nowrap; } .pp-tab svg { flex-shrink: 0; } .pp-tab:hover { color: rgb(203, 213, 225); } .pp-tab--active { border-bottom-color: rgb(245, 158, 11); color: rgb(253, 230, 138); } /* ─── Body / Sections ─────────────────────────── */ .pp-body { flex: 1; overflow-y: auto; padding: 20px 18px; scrollbar-color: rgba(245, 158, 11, 0.25) transparent; scrollbar-width: thin; } .pp-section { display: flex; flex-direction: column; gap: 0; } .pp-section--hidden { display: none !important; } /* ─── Form elements ──────────────────────────── */ .pp-field-group { display: flex; flex-direction: column; margin-bottom: 14px; } .pp-field-row { display: flex; gap: 10px; margin-bottom: 0; } .pp-field-group--half { flex: 1 1 calc(50% - 5px); min-width: 0; } .pp-field-group--third { flex: 1 1 calc(33% - 7px); min-width: 0; } .pp-label { color: rgb(148, 163, 184); display: block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; margin-bottom: 6px; text-transform: uppercase; } .pp-input { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: rgb(226, 232, 240); font-family: inherit; font-size: 0.9rem; font-weight: 500; outline: none; padding: 10px 12px; transition: border-color 160ms ease, box-shadow 160ms ease; width: 100%; } .pp-input:focus { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); } .pp-input:disabled { color: rgb(71, 85, 105); cursor: not-allowed; opacity: 0.6; } .pp-textarea { resize: vertical; min-height: 74px; } .pp-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; padding-right: 30px; } .pp-char-count { color: rgb(71, 85, 105); font-size: 0.68rem; font-weight: 700; margin-top: 4px; text-align: right; } /* ─── Buttons ─────────────────────────────────── */ .pp-btn { align-items: center; border: 0; border-radius: 8px; cursor: pointer; display: flex; font-family: inherit; font-size: 0.86rem; font-weight: 900; gap: 7px; justify-content: center; min-height: 42px; padding: 10px 16px; transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease; width: 100%; } .pp-btn:active { transform: scale(0.98); } .pp-btn:disabled { cursor: not-allowed; opacity: 0.5; } .pp-btn--primary { background: linear-gradient(135deg, rgb(245, 158, 11), rgb(253, 224, 71)); color: rgb(17, 24, 39); margin-top: 8px; } .pp-btn--primary:hover:not(:disabled) { filter: brightness(1.08); } .pp-btn--secondary { background: rgba(14, 165, 233, 0.14); border: 1px solid rgba(14, 165, 233, 0.32); color: rgb(125, 211, 252); } .pp-btn--secondary:hover:not(:disabled) { background: rgba(14, 165, 233, 0.22); border-color: rgba(14, 165, 233, 0.5); } .pp-btn--danger { background: rgba(244, 63, 94, 0.16); border: 1px solid rgba(244, 63, 94, 0.36); color: rgb(251, 113, 133); } .pp-btn--danger:hover:not(:disabled) { background: rgba(244, 63, 94, 0.26); } .pp-btn--danger-outline { background: transparent; border: 1px solid rgba(248, 113, 113, 0.3); color: rgb(252, 165, 165); } .pp-btn--danger-outline:hover:not(:disabled) { background: rgba(244, 63, 94, 0.1); border-color: rgba(248, 113, 113, 0.55); } /* ─── Status messages ─────────────────────────── */ .pp-status { color: rgb(52, 211, 153); font-size: 0.8rem; font-weight: 800; line-height: 1.35; margin: 8px 0 2px; min-height: 18px; overflow-wrap: anywhere; } /* ─── Info cards (read-only data) ─────────────── */ .pp-info-card { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; padding: 12px 14px; } .pp-info-label { color: rgb(100, 116, 139); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; } .pp-info-value { color: rgb(226, 232, 240); font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; } /* ─── Warning banner ──────────────────────────── */ .pp-warning-banner { align-items: center; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.24); border-radius: 8px; color: rgb(253, 230, 138); display: flex; font-size: 0.78rem; font-weight: 700; gap: 8px; margin-bottom: 16px; padding: 10px 12px; } /* ─── Password eye toggle ─────────────────────── */ .pp-pwd-wrap { position: relative; } .pp-pwd-wrap .pp-input { padding-right: 42px; } .pp-eye-btn { align-items: center; background: none; border: none; color: rgb(100, 116, 139); cursor: pointer; display: flex; height: 100%; justify-content: center; padding: 0 10px; position: absolute; right: 0; top: 0; transition: color 160ms ease; } .pp-eye-btn::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; display: block; height: 18px; width: 18px; } .pp-eye-btn--open::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } .pp-eye-btn:hover::after { filter: brightness(1.5); } /* ─── Toggle switches (Preferences) ──────────── */ .pp-toggle-group { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; display: flex; flex-direction: column; margin-bottom: 16px; overflow: hidden; } .pp-toggle-row { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; } .pp-toggle-row:last-child { border-bottom: 0; } .pp-toggle-label { color: rgb(203, 213, 225); font-size: 0.82rem; font-weight: 700; line-height: 1.3; } .pp-toggle-switch { cursor: pointer; flex-shrink: 0; position: relative; } .pp-toggle-switch input { height: 0; opacity: 0; position: absolute; width: 0; } .pp-toggle-track { background: rgba(71, 85, 105, 0.5); border-radius: 999px; display: block; height: 22px; position: relative; transition: background-color 200ms ease; width: 40px; } .pp-toggle-track::after { background: rgb(203, 213, 225); border-radius: 50%; content: ""; height: 16px; left: 3px; position: absolute; top: 3px; transition: transform 200ms ease, background-color 200ms ease; width: 16px; } .pp-toggle-switch input:checked + .pp-toggle-track { background: rgba(245, 158, 11, 0.75); } .pp-toggle-switch input:checked + .pp-toggle-track::after { background: rgb(253, 224, 71); transform: translateX(18px); } /* ─── Image section ───────────────────────────── */ .pp-avatar-preview-wrap { align-items: center; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 20px; } .pp-avatar-preview { align-items: center; background: rgba(15, 23, 42, 0.6); border: 2px solid rgba(245, 158, 11, 0.35); border-radius: 50%; display: flex; height: 96px; justify-content: center; overflow: hidden; width: 96px; } /* Mientras se recorta la imagen: contenedor grande, sin recortar el contenido, para que Cropper.js tenga sitio para mover/hacer zoom. */ .pp-avatar-preview.pp-avatar-preview--cropping { border-radius: 12px; height: auto; max-width: 100%; overflow: visible; width: min(360px, 100%); } .pp-avatar-preview--cropping .cropper-view-box, .pp-avatar-preview--cropping .cropper-face { border-radius: 50%; } .pp-avatar-preview-label { color: rgb(100, 116, 139); font-size: 0.72rem; font-weight: 700; margin: 0; text-align: center; } .pp-avatar-initials-lg { color: rgb(253, 230, 138); font-size: 2rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; } .pp-avatar-img { border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%; } .pp-avatar-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .pp-file-input { height: 0; opacity: 0; position: absolute; width: 0; z-index: -1; } /* ─── Account section ─────────────────────────── */ .pp-logout-btn { margin-bottom: 16px; } .pp-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 16px 0; } .pp-delete-section { display: flex; flex-direction: column; gap: 10px; } .pp-delete-warning { background: rgba(244, 63, 94, 0.08); border: 1px solid rgba(244, 63, 94, 0.2); border-radius: 8px; color: rgb(252, 165, 165); font-size: 0.78rem; font-weight: 700; line-height: 1.4; margin: 0; padding: 10px 12px; } .pp-legal-links { display: flex; gap: 14px; justify-content: center; margin-top: 20px; padding-bottom: 4px; } .pp-legal-link { color: rgb(71, 85, 105); font-size: 0.72rem; font-weight: 700; text-decoration: underline; transition: color 160ms ease; } .pp-legal-link:hover { color: rgb(148, 163, 184); } /* ─── Toast notification ──────────────────────── */ .rp-toast { background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(245, 158, 11, 0.28); border-radius: 10px; bottom: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); color: rgb(226, 232, 240); font-size: 0.86rem; font-weight: 700; left: 50%; max-width: min(90vw, 380px); opacity: 0; padding: 12px 18px; position: fixed; transform: translateX(-50%) translateY(12px); transition: opacity 340ms ease, transform 340ms ease; z-index: 9999; } .rp-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .rp-toast--success { border-color: rgba(52, 211, 153, 0.4); color: rgb(110, 231, 183); } .rp-toast--error { border-color: rgba(248, 113, 113, 0.4); color: rgb(252, 165, 165); } /* ─── Responsive ──────────────────────────────── */ @media (max-width: 480px) { .pp-panel { max-width: 100%; } .pp-header { padding: 12px 14px; } .pp-body { padding: 16px 14px; } .pp-field-row { flex-direction: column; } .pp-field-group--half, .pp-field-group--third { flex: 1 1 100%; } .pp-tabs { padding: 0; } .pp-tab { font-size: 0.58rem; min-width: 54px; padding: 8px 6px 6px; } } @media (min-width: 481px) and (max-width: 640px) { .pp-panel { max-width: 100%; } } /* Clases que sustituyen a los antiguos atributos style="" inline en site-actions.js (menú de idioma, modal de acceso) — necesarias para poder quitar 'unsafe-inline' de style-src en la CSP. */ .icon-block { display: block; } .no-underline { text-decoration: none; } .dropdown-arrow { margin-left: 4px; transition: transform 0.2s ease; } .lang-option-row { align-items: center; display: flex; gap: 8px; } .lang-flag-img { display: block; height: 100%; object-fit: cover; width: 100%; } .auth-password-wrapper { display: block; position: relative; width: 100%; } .auth-password-input { padding-right: 2.5rem; width: 100%; } .auth-toggle-password { align-items: center; background: none; border: 0; color: rgb(148, 163, 184); cursor: pointer; display: flex; padding: 0; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); } .auth-forgot-link { color: rgb(148, 163, 184); display: block; font-size: 0.8rem; margin-top: 1rem; text-align: center; text-decoration: none; } .auth-forgot-link--primary { color: rgb(253, 230, 138); text-decoration: underline; } .auth-step-title { color: rgb(255, 255, 255); font-size: 1.1rem; margin: 0 0 0.5rem; } .auth-step-desc { color: rgb(148, 163, 184); font-size: 0.8rem; line-height: 1.4; margin: 0 0 1rem; } .profile-alert .auth-hint { color: rgb(100, 116, 139); font-size: 0.68rem; line-height: 1.3; margin: -0.5rem 0 0.9rem; } .auth-code-input { font-size: 1.2rem; letter-spacing: 0.4em; text-align: center; }