/* main.css — Estilo TREXoRoll: jurásico, moderno, mobile-first y coherente. Sistema de diseño con tokens, jerarquía tipográfica y micro-animaciones. NOTA: los selectores de controles táctiles (.dpad, .dpad-btn, .joystick…) y el modelo de pointer-events de #screen-game se conservan intactos: están probados y funcionando en móvil. */ :root { /* Verdes jurásicos (de sombra a fronda) */ --jungle-0: #091b12; --jungle-1: #102a1c; --jungle-2: #18452c; --jungle-3: #226039; /* Ámbar / dorado (marca, acentos) */ --amber: #f2c14e; --amber-2: #f4a261; --amber-deep: #b5791f; /* Acciones */ --green: #34d27b; --green-deep: #1ea355; --green-ink: #06351c; --red: #f0584a; --red-deep: #6b1d16; /* Neutros */ --cream: #f6f1e3; --bone: #e7e1cd; --ink: #091b12; --muted: rgba(246, 241, 227, 0.66); /* Sombras y aros */ --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3); --shadow: 0 14px 36px rgba(0, 0, 0, 0.45); --shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.52); --ring-green: 0 0 0 3px rgba(52, 210, 123, 0.4); --panel-bg: rgba(13, 33, 22, 0.78); --panel-border: rgba(242, 193, 78, 0.4); /* Fondo de escena prehistórica: se GENERA de forma PROCEDURAL (Canvas 2D, original) en runtime y se inyecta aquí como data URL (ver src/scene/textures.js → makeSceneBackgroundURL, fijado en Game). Sin archivos binarios ni marcas de terceros. Reserva: degradado de jungla en la paleta, por si el runtime aún no lo ha fijado. */ --bg-jungle: linear-gradient(180deg, #7ec8e3 0%, #bfe3d0 44%, #cfe0a0 78%, #4f7a3a 100%); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-family: var(--font); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: var(--jungle-0); color: var(--cream); font-family: var(--font); /* `touch-action: none` AQUÍ rompía el scroll con el dedo dentro de los paneles (Ajustes en iPhone): el valor efectivo de touch-action es la intersección con TODOS los ancestros, así que un `none` en desactiva el paneo también en `.panel` (que sí es scrollable). `manipulation` mantiene lo que de verdad importaba (sin doble-tap-zoom) y deja desplazar. El gameplay NO cambia: las superficies que reciben el dedo al jugar (#tilt-surface, el lienzo, #joystick, .dpad, #screen-game) declaran su propio `touch-action: none`. */ touch-action: manipulation; overscroll-behavior: none; /* evita "pull to refresh" / rebote */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* evita el menú de pulsación larga en iOS */ -webkit-tap-highlight-color: transparent; } #game-canvas { position: fixed; inset: 0; z-index: 0; touch-action: none; /* Fondo del GAMEPLAY: la imagen jurásica se ve detrás del lienzo 3D (transparente). Overlay suave (más claro que en menús) para que el paisaje luzca sin restar legibilidad al tablero; mobile-first: cover/center sin deformar. */ background-color: var(--jungle-0); background-image: linear-gradient(180deg, rgba(9, 27, 18, 0.30) 0%, rgba(9, 27, 18, 0.14) 38%, rgba(9, 27, 18, 0.5) 100%), var(--bg-jungle); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } #game-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; background: transparent; } /* Igual que en : `manipulation` en la capa raíz de UI para no bloquear el paneo dentro de los paneles scrollables. El juego conserva `none` en sus propias superficies (ver #screen-game). */ #ui { position: fixed; inset: 0; z-index: 1; touch-action: manipulation; } /* ============================ Pantallas ============================ */ .screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); overflow: hidden; } .screen.active { display: flex; } /* Safe areas LATERALES: en horizontal el notch / Dynamic Island ocupa uno de los lados y el panel quedaba parcialmente debajo. Se aplican SOLO a las pantallas de menú: el HUD del juego ya aplica las suyas (.hud-top, botón de pausa, joystick) y duplicarlas aquí lo desplazaría. */ .screen:not(#screen-game) { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } /* Fondo de las pantallas de menú: IMAGEN jurásica + overlay oscuro para legibilidad. mobile-first: cover (sin deformar) + center + no-repeat; color de fallback si la imagen no carga. El gameplay (#screen-game) NO la usa: conserva su cielo 3D por bioma. */ #screen-auth.active, #screen-legal.active, #screen-landing.active, #screen-menu.active, #screen-balls.active, #screen-shop.active, #screen-levels.active, #screen-howto.active, #screen-gameover.active, #screen-adview.active, #screen-lifepacks.active { background-color: var(--jungle-0); /* fallback */ background-image: linear-gradient(180deg, rgba(9, 27, 18, 0.5) 0%, rgba(9, 27, 18, 0.66) 55%, rgba(9, 27, 18, 0.84) 100%), var(--bg-jungle); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat, no-repeat; } /* Victoria: overlay OSCURO translúcido → se ve el TABLERO/celebración detrás (lienzo 3D), dimmed, para un modal premium. La prep sí usa su fondo jurásico propio. */ #screen-prep.active { background-color: var(--jungle-0); background-image: linear-gradient(180deg, rgba(9, 27, 18, 0.5) 0%, rgba(9, 27, 18, 0.66) 55%, rgba(9, 27, 18, 0.84) 100%), var(--bg-jungle); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat, no-repeat; } #screen-win.active { /* Oscurecido con un degradado ESTÁTICO (sin backdrop-filter): antes brightness()+saturate() se recomputaban CADA frame sobre el lienzo 3D animado de la celebración (el tablero se ve detrás) → spike de rendimiento al ganar. El degradado atenúa el tablero igual, sin coste por frame. */ background: radial-gradient(120% 90% at 50% 42%, rgba(9, 27, 18, 0.46), rgba(6, 18, 11, 0.82) 80%); } /* Banda de "suelo/horizonte" sutil al pie de los menús */ .screen.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none; background: radial-gradient(120% 100% at 50% 100%, rgba(9, 27, 18, 0.0), rgba(9, 27, 18, 0.55) 85%); z-index: 0; } #screen-game.active::after { display: none; } /* La pantalla de juego es transparente y deja jugar con el lienzo */ #screen-game.active { display: block; background: transparent; pointer-events: none; } /* Durante la partida NO se desplaza nada: el `none` que antes vivía en se declara aquí, donde sí corresponde, para que relajar el a `manipulation` (necesario para el scroll de los menús) no habilite gestos de paneo sobre el tablero. */ #screen-game { touch-action: none; } #screen-game .hud-chip, #screen-game .btn, #screen-game #joystick, #screen-game .dpad-btn { pointer-events: auto; } /* Superficie del control TÁCTIL por arrastre (v0.25.3): capta el dedo sobre el tablero para inclinarlo. Cubre toda la pantalla PERO por debajo del HUD/controles (que van en z-index superior y capturan su propio toque), así el arrastre nunca se activa al tocar pausa/HUD/ joystick. Solo activa en táctil; en desktop el control es teclado/ratón. */ #tilt-surface { position: absolute; inset: 0; z-index: 0; pointer-events: none; touch-action: none; transition: background 0.18s ease; } body.is-touch #tilt-surface { pointer-events: auto; } /* Feedback SUTIL al arrastrar (v0.25.4): un halo verde muy tenue centrado sobre el tablero mientras el dedo inclina; desaparece al soltar. No invasivo (baja opacidad, sin tapar). */ body.is-tilting #tilt-surface { background: radial-gradient(120% 82% at 50% 60%, rgba(46, 204, 113, 0.09), rgba(46, 204, 113, 0) 62%); } /* Modo RENDIMIENTO (Android/WebView/emulador): la clase gfx-performance en el (ver device.js) neutraliza los filtros CSS más costosos. backdrop-filter/blur obligan al WebView a recomponer regiones translúcidas cada vez que algo cambia detrás → caro en gama media. Se apaga: los paneles pierden el desenfoque (siguen legibles por su fondo) pero el juego va más fluido. La estética completa se conserva en 'quality'/'balanced' (escritorio y móvil web). */ body.gfx-performance, body.gfx-performance *, body.gfx-performance *::before, body.gfx-performance *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Utilidad: elementos SOLO en dispositivos táctiles (p. ej. el ajuste de joystick). */ .touch-only { display: none; } body.is-touch .touch-only { display: block; } .settings-hint { margin: 2px 2px 6px; font-size: 0.78rem; opacity: 0.72; text-align: center; } /* ===================== Decoración de fondo ===================== */ /* Capa de emojis flotantes (hojas, huesos, huevos) — solo decorativa */ .bg-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .floaty { position: absolute; font-size: clamp(20px, 5vw, 34px); opacity: 0.16; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); animation: drift 13s ease-in-out infinite; } .floaty.f1 { top: 12%; left: 8%; animation-delay: 0s; } .floaty.f2 { top: 22%; right: 10%; animation-delay: -3s; font-size: clamp(24px, 6vw, 42px); } .floaty.f3 { bottom: 26%; left: 12%; animation-delay: -6s; } .floaty.f4 { bottom: 18%; right: 14%; animation-delay: -9s; } .floaty.f5 { top: 46%; left: 50%; animation-delay: -4.5s; opacity: 0.1; } @keyframes drift { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } } @media (prefers-reduced-motion: reduce) { .floaty { animation: none; } } /* ============================ Paneles ============================ */ .panel { position: relative; z-index: 1; width: min(560px, 94vw); max-height: 92vh; max-height: 90dvh; /* viewport dinámico: respeta la barra del navegador móvil */ /* Última palabra: el hueco REAL de .screen, que ya descuenta las safe areas en su padding. Con 90dvh el panel podía superar ese hueco en iPhone con Dynamic Island (safe-top 59 + safe-bottom 34 > 10dvh en 852px) y .screen (overflow:hidden) recortaba el borde inferior. `100%` se resuelve contra el content-box de .screen → no duplica la safe area. */ max-height: 100%; overflow-y: auto; overflow-x: hidden; /* nunca scroll horizontal */ overscroll-behavior-y: contain;/* el scroll del panel no arrastra al documento */ touch-action: pan-y; /* el dedo puede desplazar el panel (no así el tablero) */ -webkit-overflow-scrolling: touch; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 24px; padding: 30px 26px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .panel.center { text-align: center; } /* Filo dorado superior para dar sensación de "tarjeta de juego" */ .panel::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: 0.8; } /* ============================ Tipografía ============================ */ .title { font-size: clamp(2.5rem, 9.5vw, 4.2rem); font-weight: 900; letter-spacing: 0.5px; line-height: 1.02; margin: 8px 0 4px; color: var(--amber); text-shadow: 0 2px 0 var(--amber-deep), 0 4px 0 #7a4f1d, 0 10px 22px rgba(0, 0, 0, 0.55); } .title span { color: var(--green); } .title.small { font-size: clamp(1.7rem, 6vw, 2.5rem); text-shadow: 0 2px 0 var(--amber-deep), 0 8px 18px rgba(0,0,0,0.5); } .title.danger { color: var(--red); text-shadow: 0 2px 0 var(--red-deep), 0 8px 18px rgba(0, 0, 0, 0.5); } .subtitle { font-size: clamp(1rem, 4vw, 1.22rem); color: var(--cream); opacity: 0.94; margin: 0 0 22px; line-height: 1.45; } .muted { color: var(--muted); font-size: 0.95rem; margin-top: 14px; } /* ===================== Landing (marca) ===================== */ .brand { display: flex; flex-direction: column; align-items: center; } .brand-tag { display: inline-block; margin: 0 auto 10px; padding: 4px 14px; font-size: 0.72rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--amber); background: rgba(242, 193, 78, 0.12); border: 1px solid rgba(242, 193, 78, 0.5); border-radius: 999px; } .cta { margin-top: 6px; } .cta-hint { font-size: 0.82rem; color: var(--muted); margin-top: 10px; } /* ===================== Emblema de la bola ===================== */ .ball-emblem { width: 104px; height: 104px; margin: 0 auto 8px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffffff, #d5dde2 72%, #b9c4cb); display: grid; place-items: center; font-size: 50px; box-shadow: inset -8px -12px 20px rgba(0, 0, 0, 0.2), 0 14px 28px rgba(0, 0, 0, 0.45); border: 3px solid var(--green); } .ball-emblem.big { width: 138px; height: 138px; font-size: 70px; } /* Rebote suave de la bola del landing */ .floaty-ball { animation: ballBob 2.8s ease-in-out infinite; } @keyframes ballBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } } @media (prefers-reduced-motion: reduce) { .floaty-ball { animation: none; } } /* ============================ Botones ============================ */ .btn { appearance: none; border: 1px solid rgba(242, 193, 78, 0.45); font-family: inherit; font-size: 1.08rem; font-weight: 800; letter-spacing: 0.3px; color: var(--cream); background: rgba(255, 255, 255, 0.08); padding: 14px 22px; border-radius: 15px; cursor: pointer; transition: transform 0.08s ease, background 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; min-width: 180px; box-shadow: var(--shadow-sm); } .btn:hover { background: rgba(255, 255, 255, 0.16); } .btn:active { transform: scale(0.96); } .btn.primary { background: linear-gradient(180deg, #4ade8c, var(--green-deep)); border-color: #1a9450; color: var(--green-ink); box-shadow: 0 6px 0 #136e3a, var(--shadow); } .btn.primary:hover { filter: brightness(1.06); } .btn.primary:active { box-shadow: 0 2px 0 #136e3a; transform: translateY(3px) scale(0.99); } .btn.amber { background: linear-gradient(180deg, #f7d06b, var(--amber-deep)); border-color: var(--amber-deep); color: #3c2606; box-shadow: 0 6px 0 #855613, var(--shadow); } .btn.amber:active { box-shadow: 0 2px 0 #855613; transform: translateY(3px) scale(0.99); } .btn.ghost { background: transparent; min-width: auto; opacity: 0.85; box-shadow: none; } .btn.ghost:hover { opacity: 1; background: rgba(255, 255, 255, 0.07); } .btn.tiny { min-width: auto; padding: 6px 12px; font-size: 1.2rem; } .btn-icon { margin-right: 6px; } /* ============================================================================ Menú principal — rediseño premium v0.21 Cabecera compacta · tarjeta de stats · 2 CTAs héroe · grid de tiles · utilitarios. Objetivo: jerarquía clara, look premium glass, sin panel largo ni scroll. ============================================================================ */ .menu-panel { width: min(420px, 94vw); display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 18px; text-align: left; background: radial-gradient(120% 80% at 50% -10%, rgba(52, 210, 123, 0.10), transparent 60%), linear-gradient(180deg, rgba(18, 44, 30, 0.86), rgba(9, 24, 16, 0.92)); border: 1px solid rgba(242, 193, 78, 0.42); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); } /* — Cabecera: avatar + título + saludo — */ .menu-head { display: flex; align-items: center; gap: 14px; } .menu-avatar { margin: 0; flex-shrink: 0; } .menu-avatar canvas { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(242, 193, 78, 0.65); box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 14px rgba(52, 210, 123, 0.28); } .menu-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .menu-title { margin: 0; font-size: clamp(1.55rem, 6vw, 2rem); font-weight: 900; letter-spacing: 0.4px; line-height: 1; color: var(--amber); text-shadow: 0 2px 0 var(--amber-deep), 0 6px 14px rgba(0,0,0,0.5); } .menu-title span { color: var(--green); } .menu-head .menu-greeting { margin: 0; font-size: 0.9rem; } /* — Tarjeta de estadísticas — */ .menu-stats { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.06); } .menu-pills { display: flex; gap: 8px; justify-content: space-between; } .menu-pills .stat-pill { flex: 1; justify-content: center; gap: 5px; padding: 7px 6px; background: rgba(9, 27, 18, 0.7); border: 1px solid rgba(242, 193, 78, 0.28); border-radius: 12px; font-size: 0.82rem; font-weight: 800; color: var(--bone); display: inline-flex; align-items: center; min-width: 0; } .menu-pills .stat-pill b { color: var(--amber); font-weight: 900; } .menu-pills .pill-ic { font-size: 0.95rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .menu-progress { display: flex; align-items: center; gap: 10px; } .menu-progress .progress-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(0,0,0,0.4); overflow: hidden; border: 1px solid rgba(242, 193, 78, 0.25); } .menu-progress .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--amber)); box-shadow: 0 0 10px rgba(242, 193, 78, 0.5); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); } .progress-pct { font-size: 0.78rem; font-weight: 800; color: var(--amber); min-width: 34px; text-align: right; } /* — CTAs principales — */ .menu-cta { display: flex; flex-direction: column; gap: 10px; } .cta-main { width: 100%; min-width: 0; margin: 0; font-size: 1.18rem; font-weight: 900; letter-spacing: 0.4px; padding: 15px 20px; border-radius: 16px; } .cta-hero { font-size: 1.32rem; padding: 17px 20px; background: linear-gradient(180deg, #58e89a, var(--green-deep)); box-shadow: 0 7px 0 #136e3a, var(--shadow), 0 0 22px rgba(52, 210, 123, 0.35); position: relative; overflow: hidden; } .cta-hero::after { /* brillo diagonal sutil (transform → compositor, suave en móvil) */ content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); will-change: transform; animation: ctaShine 4.5s ease-in-out infinite; } @keyframes ctaShine { 0%, 70% { transform: translateX(-180%) skewX(-18deg); } 88%, 100% { transform: translateX(320%) skewX(-18deg); } } .cta-hero:active { box-shadow: 0 2px 0 #136e3a, var(--shadow); } @media (prefers-reduced-motion: reduce) { .cta-hero::after { animation: none; } } /* "Continuar" en ámbar (reanudar la aventura): distinto a "Jugar", ambos protagonistas. */ #btn-continue.cta-main { background: linear-gradient(180deg, #f7d06b, var(--amber-deep)); border-color: var(--amber-deep); color: #3c2606; box-shadow: 0 6px 0 #855613, var(--shadow); } #btn-continue.cta-main:hover { filter: brightness(1.05); } #btn-continue.cta-main:active { box-shadow: 0 2px 0 #855613; transform: translateY(3px) scale(0.99); } /* — Grid de tiles (acciones secundarias) — */ .menu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .menu-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 6px 11px; border-radius: 16px; cursor: pointer; font-family: inherit; color: var(--cream); border: 1px solid rgba(242, 193, 78, 0.28); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06); transition: transform 0.1s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .menu-tile:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); border-color: rgba(242,193,78,0.5); box-shadow: var(--shadow); } .menu-tile:active { transform: scale(0.95); } .tile-ic { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45)); } .tile-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2px; } .tile-feature { border-color: rgba(242, 193, 78, 0.42); background: linear-gradient(180deg, rgba(242,193,78,0.14), rgba(255,255,255,0.03)); } /* Badge (contador o punto) en la esquina del tile */ .tile-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 900; color: var(--green-ink); border-radius: 999px; background: linear-gradient(180deg, #58e89a, var(--green-deep)); border: 2px solid rgba(9,24,16,0.9); box-shadow: 0 3px 8px rgba(0,0,0,0.45); } .tile-badge[hidden] { display: none; } .tile-badge.amber { background: linear-gradient(180deg, #f7d06b, var(--amber-deep)); color: #3c2606; } .tile-badge.dot { min-width: 14px; width: 14px; height: 14px; padding: 0; background: var(--red); border-color: rgba(9,24,16,0.9); } .menu-tile.ready { border-color: var(--amber); box-shadow: var(--shadow-sm), 0 0 16px rgba(242,193,78,0.45); animation: tileGlow 1.9s ease-in-out infinite; } @keyframes tileGlow { 0%,100% { box-shadow: var(--shadow-sm), 0 0 10px rgba(242,193,78,0.3); } 50% { box-shadow: var(--shadow-sm), 0 0 20px rgba(242,193,78,0.6); } } @media (prefers-reduced-motion: reduce) { .menu-tile.ready { animation: none; } } /* — Fila utilitaria: ayuda / ajustes / pantalla + idioma — */ .menu-util { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); } .util-btn { flex: 1; min-width: 84px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 0.84rem; font-weight: 700; color: var(--bone); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: background 0.15s ease, transform 0.08s ease, border-color 0.15s ease; } .util-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(242,193,78,0.4); } .util-btn:active { transform: scale(0.95); } .util-ic { font-size: 1.05rem; } .lang-mini { display: inline-flex; gap: 6px; } .lang-mini .lang-btn { min-width: 40px; min-height: 36px; padding: 6px 10px; } /* Selector de idioma (menú) */ .lang-select { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .lang-label { font-size: 0.85rem; color: var(--muted); } .lang-btn { appearance: none; cursor: pointer; min-width: 46px; min-height: 38px; padding: 6px 14px; font-family: inherit; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.5px; color: var(--cream); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(242, 193, 78, 0.4); border-radius: 10px; transition: background 0.15s ease, transform 0.08s ease, color 0.15s ease; } .lang-btn:active { transform: scale(0.95); } .lang-btn.active { background: linear-gradient(180deg, #4ade8c, var(--green-deep)); color: var(--green-ink); border-color: #1a9450; } /* Fila de chips/stats reutilizable (menú, prep, win) */ .stat-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; } .stat-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(9, 27, 18, 0.6); border: 1px solid rgba(242, 193, 78, 0.32); border-radius: 999px; padding: 6px 13px; font-size: 0.86rem; font-weight: 700; color: var(--bone); } .stat-chip b { color: var(--amber); } /* Barra de progreso (estrellas totales) */ .progress-wrap { margin: 14px auto 2px; width: min(320px, 86%); } .progress-bar { height: 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; border: 1px solid rgba(242, 193, 78, 0.25); } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--amber)); transition: width 0.6s ease; } .progress-label { font-size: 0.78rem; color: var(--muted); margin-top: 6px; } /* ============================ Niveles ============================ */ .levels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin: 18px 0; } .level-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px 10px 13px; border-radius: 16px; border: 1px solid rgba(242, 193, 78, 0.38); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); color: var(--cream); font-family: inherit; cursor: pointer; overflow: hidden; transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .level-card::before { /* franja de color según dificultad (data-tier) */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--green); } .level-card[data-tier="Media"]::before { background: var(--amber); } .level-card[data-tier="Difícil"]::before { background: var(--amber-2); } .level-card[data-tier="Experto"]::before { background: var(--red); } .level-card:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .level-card:active { transform: scale(0.96); } .level-card.locked { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.4); } .level-card.locked::before { background: rgba(255, 255, 255, 0.2); } .level-num { font-size: 1.55rem; font-weight: 900; color: var(--amber); line-height: 1; } .level-card-name { font-size: 0.82rem; text-align: center; opacity: 0.92; line-height: 1.2; } .level-lock { font-size: 1.1rem; } .level-go { color: var(--green); } /* Progreso general del selector de niveles */ .levels-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; } .lp-bar { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,0.32); border: 1px solid rgba(242,193,78,0.28); } .lp-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--amber)); box-shadow: 0 0 10px rgba(52,210,123,0.4); transition: width 0.5s ease; } .lp-label { font-size: 0.8rem; font-weight: 800; color: var(--amber); white-space: nowrap; } .levels-legend { display: flex; gap: 16px; justify-content: center; margin: 2px 0 6px; font-size: 0.74rem; color: var(--bone); opacity: 0.85; } .lg-item { display: inline-flex; align-items: center; gap: 4px; } .lg-ic { font-size: 0.9rem; } /* Distintivo de nivel especial (👑 jefe / ⏳ contrarreloj) en la esquina de la tarjeta */ .level-flag { position: absolute; top: 5px; right: 6px; font-size: 0.95rem; line-height: 1; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); } .flag-boss { color: #ffd45a; } .flag-ta { color: #8fc7ff; } .level-card.is-boss { border-color: rgba(240,88,74,0.55); } .level-card.is-boss::before { background: linear-gradient(90deg, var(--red), var(--amber-2)) !important; height: 5px; } .level-card.is-ta { border-color: rgba(118,180,255,0.5); } .level-card.is-ta::before { background: linear-gradient(90deg, #5aa0e0, var(--green)) !important; height: 5px; } /* ============================ Cómo jugar ============================ */ .howto { line-height: 1.6; padding-left: 0; list-style: none; margin: 12px 0 18px; display: grid; gap: 9px; } .howto li { margin: 0; padding: 11px 13px; border-radius: 13px; background: rgba(9, 27, 18, 0.5); border: 1px solid rgba(242, 193, 78, 0.22); font-size: 0.95rem; } .howto kbd { background: var(--jungle-0); border: 1px solid var(--amber); border-radius: 6px; padding: 1px 7px; font-size: 0.82rem; margin: 0 1px; box-shadow: 0 2px 0 rgba(0,0,0,0.4); } .goal-txt { color: var(--green); font-weight: 800; } .trap-txt { color: var(--red); font-weight: 800; } /* Ayuda corta y visual: 5 pasos numerados */ .howto-steps { list-style: none; margin: 14px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .howto-step { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; text-align: left; background: rgba(0,0,0,0.28); border: 1px solid rgba(242,193,78,0.22); } .hs-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--green-ink); background: linear-gradient(180deg, var(--amber), var(--amber-deep)); box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .hs-ic { font-size: 1.3rem; width: 1.5rem; text-align: center; } .hs-tx { font-size: 0.92rem; font-weight: 600; line-height: 1.25; color: var(--cream); } .howto-controls { font-size: 0.82rem; color: var(--bone); opacity: 0.92; margin: 8px 0 4px; line-height: 1.4; text-align: center; } .howto-controls strong { color: var(--amber); } /* ============================ Preparación ============================ */ .prep-lives { font-size: 1.9rem; margin: 8px 0 4px; letter-spacing: 5px; } .prep-objective { font-size: 1.08rem; margin: 8px 0 4px; line-height: 1.45; color: var(--bone); } .warn { color: var(--amber-2); margin-bottom: 18px; font-size: 0.92rem; } #screen-prep .btn { display: block; margin: 10px auto 0; } /* ============================ HUD en partida ============================ */ .hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 8px; align-items: center; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); flex-wrap: wrap; } .hud-chip { background: rgba(9, 27, 18, 0.82); border: 1px solid rgba(242, 193, 78, 0.42); border-radius: 999px; padding: 7px 14px; font-size: 0.92rem; font-weight: 800; white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform 0.12s ease, color 0.12s ease; } .hud-chip.pop { animation: chipPop 0.34s ease; } @keyframes chipPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--amber); } 100% { transform: scale(1); } } .hud-top .btn.tiny { margin-left: auto; background: rgba(9, 27, 18, 0.86); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; } .hud-hint { position: absolute; top: calc(env(safe-area-inset-top) + 54px); left: 50%; transform: translateX(-50%); max-width: 90vw; text-align: center; font-size: 0.85rem; background: rgba(9, 27, 18, 0.74); border: 1px solid rgba(242, 193, 78, 0.35); padding: 7px 15px; border-radius: 999px; opacity: 0.94; transition: opacity 0.6s ease; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .hud-hint.hidden { opacity: 0; } .hud-toast { position: absolute; top: 36%; left: 50%; transform: translate(-50%, -6px); background: rgba(9, 27, 18, 0.92); border: 1px solid var(--amber); border-radius: 16px; padding: 12px 24px; font-size: 1.15rem; font-weight: 900; color: var(--cream); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; text-align: center; box-shadow: var(--shadow); } .hud-toast.show { opacity: 1; transform: translate(-50%, 0); } /* Coach de tutorial (niveles 1-5): banner inferior-centro, premium y NO invasivo. Deja pasar el toque al tablero (pointer-events:none); solo el ✕ es pulsable. */ .tutorial-coach { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 158px); /* por encima de los controles táctiles */ transform: translateX(-50%) translateY(10px); display: flex; align-items: center; gap: 10px; max-width: min(420px, 80vw); padding: 10px 12px 10px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(18,46,30,0.94), rgba(8,22,14,0.96)); border: 1px solid rgba(242,193,78,0.5); box-shadow: var(--shadow), 0 0 18px rgba(52,210,123,0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--cream); opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none; z-index: 3; } .tutorial-coach.show { opacity: 1; transform: translateX(-50%) translateY(0); } .tc-ic { font-size: 1.25rem; flex-shrink: 0; } .tc-text { font-size: 0.9rem; font-weight: 700; line-height: 1.25; text-align: left; } .tc-close { flex-shrink: 0; pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--cream); font-size: 0.85rem; font-weight: 900; cursor: pointer; display: grid; place-items: center; } .tc-close:active { transform: scale(0.9); } /* Móvil horizontal: más compacto y pegado abajo-centro (entre los controles de las esquinas). */ body.is-landscape-mobile .tutorial-coach { bottom: calc(env(safe-area-inset-bottom) + 8px); padding: 7px 9px 7px 11px; max-width: 58vw; } body.is-landscape-mobile .tc-text { font-size: 0.8rem; } body.is-landscape-mobile .tc-ic { font-size: 1.05rem; } /* ============================ Win / Game Over ============================ */ .big-score { font-size: 1.7rem; font-weight: 900; color: var(--amber); margin: 12px 0 6px; } #screen-win .btn, #screen-gameover .btn { display: block; margin: 10px auto 0; } .win-emoji { font-size: 52px; margin: 0 0 2px; animation: ballBob 2.4s ease-in-out infinite; } .over-emoji { font-size: 50px; margin: 0 0 2px; opacity: 0.92; } /* Destellos de victoria (CSS, además del dino 3D) */ .sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .sparkles span { position: absolute; top: -8%; font-size: 16px; opacity: 0; animation: fall 2.6s linear infinite; } #screen-win.active .sparkles span { opacity: 1; } @keyframes fall { 0% { transform: translateY(-10vh) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sparkles span, .win-emoji { animation: none; } } /* ============================ Error de arranque ============================ */ #boot-error { display: none; position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 5; background: var(--red); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; } /* Panel de recuperación (red de seguridad anti-pantalla-negra): centrado y por encima de todo. */ #boot-error.recovery { top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%); z-index: 9999; max-width: 320px; text-align: center; background: #16321f; color: #f1ede0; border: 1px solid rgba(242,193,78,0.35); box-shadow: 0 12px 40px rgba(0,0,0,0.55); } #boot-error.recovery button { margin-top: 12px; } /* ===================== Transiciones de pantalla ===================== */ .screen.active { animation: screenIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes screenIn { from { opacity: 0; transform: translateY(12px) scale(0.992); } to { opacity: 1; transform: translateY(0) scale(1); } } .panel { animation: panelIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* El HUD de juego no debe deslizarse */ #screen-game.active { animation: none; } /* Viñeta cinematográfica sobre el lienzo (no captura puntero) */ #vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 42%, transparent 55%, rgba(7, 20, 12, 0.5) 100%); } /* Flash de feedback (pérdida de vida / victoria) */ #flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; } #flash.show { animation: flashFade 0.36s ease-out; } #flash.danger { background: radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(240, 88, 74, 0.55)); } #flash.gold { background: radial-gradient(120% 100% at 50% 50%, rgba(52, 210, 123, 0.25), rgba(242, 193, 78, 0.38)); } @keyframes flashFade { from { opacity: 1; } to { opacity: 0; } } /* ================================================================ CONTROLES TÁCTILES — PROBADOS Y FUNCIONANDO. No alterar la lógica de eventos/pointer-events; solo estética. ================================================================ */ .joystick, .dpad { display: none; } /* Joystick OCULTO en móvil por defecto (v0.25.4): el control PRINCIPAL es el arrastre táctil. Es OPCIONAL desde Ajustes → «Joystick» (clase 'show-joystick' en el , persistida). */ body.is-touch.show-joystick .joystick { display: block; } /* D-pad de flechas OCULTO en móvil (v0.25.3): reactivable para depurar con 'debug-dpad' (constante DEBUG_SHOW_DPAD). */ body.is-touch .dpad { display: none; } body.is-touch.debug-dpad .dpad { display: grid; } /* Joystick (cuando se activa) como control SECUNDARIO: más pequeño y discreto para no competir con el gesto directo sobre el tablero. Recupera presencia al usarse (.active). */ body.is-touch .joystick { width: 96px; height: 96px; opacity: 0.55; } body.is-touch .joystick.active { opacity: 0.95; } /* D-pad digital, abajo-izquierda. CONTROL PRINCIPAL en móvil. */ .dpad { position: absolute; left: max(16px, calc(env(safe-area-inset-left) + 8px)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); width: 168px; height: 168px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; pointer-events: none; /* solo los botones capturan el toque */ z-index: 3; } .dpad-btn { pointer-events: auto; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1; font-weight: 700; color: #f5f0e1; background: rgba(8, 22, 14, 0.86); border: 2px solid rgba(233, 196, 106, 0.7); border-radius: 14px; touch-action: none; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.06s ease, transform 0.06s ease, border-color 0.06s ease; } .dpad-btn.pressed { background: rgba(46, 204, 113, 0.85); border-color: #eafff2; color: #07301a; transform: scale(0.92); box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.4), inset 0 2px 6px rgba(0,0,0,0.3); } .dpad-up { grid-area: 1 / 2 / 2 / 3; } .dpad-left { grid-area: 2 / 1 / 3 / 2; } .dpad-right { grid-area: 2 / 3 / 3 / 4; } .dpad-down { grid-area: 3 / 2 / 4 / 3; } /* Joystick analógico, abajo-derecha. COMPLEMENTO secundario. */ .joystick { position: absolute; right: max(18px, calc(env(safe-area-inset-right) + 10px)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); width: 112px; height: 112px; border-radius: 50%; border: 2px solid rgba(245, 240, 225, 0.4); background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.10), rgba(14, 36, 23, 0.5)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 18px rgba(0, 0, 0, 0.25); touch-action: none; user-select: none; -webkit-user-select: none; opacity: 0.82; transition: opacity 0.2s ease, border-color 0.15s ease, box-shadow 0.15s ease; z-index: 3; } .joystick.active { opacity: 1; border-color: var(--green); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(46, 204, 113, 0.35); } .joystick-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffffff, var(--green) 82%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); pointer-events: none; transition: transform 0.04s linear; } /* ============================ Chips y estrellas ============================ */ .tier-chip { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(242, 193, 78, 0.16); border: 1px solid var(--amber); color: var(--amber); font-weight: 800; font-size: 0.82rem; margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; } .tier-chip[data-tier="Media"] { color: var(--amber); border-color: var(--amber); background: rgba(242,193,78,0.16); } .tier-chip[data-tier="Difícil"] { color: var(--amber-2); border-color: var(--amber-2); background: rgba(244,162,97,0.16); } .tier-chip[data-tier="Experto"] { color: var(--red); border-color: var(--red); background: rgba(240,88,74,0.16); } .stars-row { font-size: 2.3rem; letter-spacing: 7px; color: var(--amber); margin: 6px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.45); } .level-stars { color: var(--amber); font-size: 0.88rem; letter-spacing: 1px; } /* Badge de récord */ .record-badge { display: none; /* Game lo muestra cuando aplica */ color: var(--green-ink); background: linear-gradient(180deg, #ffe08a, var(--amber-2)); font-weight: 900; padding: 7px 16px; border-radius: 999px; margin: 10px auto; width: fit-content; animation: pop 0.4s ease; box-shadow: var(--shadow-sm); } @keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Pausa: translúcido para ver el tablero detrás */ #screen-pause.active { background: radial-gradient(130% 90% at 50% -10%, rgba(126, 200, 227, 0.18), transparent 60%), linear-gradient(180deg, rgba(30, 77, 43, 0.88), rgba(9, 27, 18, 0.92)); } #screen-pause .btn { display: block; margin: 10px auto 0; } .pause-mini { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; } /* ===================== Selección de bola ===================== */ .ball-preview { display: flex; justify-content: center; margin: 0 auto 8px; } .ball-preview canvas { border-radius: 50%; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); } .ball-preview.sm { margin: 0; } .balls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; margin: 18px 0; } .ball-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 8px 14px; border-radius: 18px; border: 2px solid rgba(242, 193, 78, 0.32); background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); color: var(--cream); font-family: inherit; cursor: pointer; transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .ball-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .ball-card:active { transform: scale(0.95); } .ball-card.selected { border-color: var(--green); background: rgba(52, 210, 123, 0.18); box-shadow: 0 0 0 2px rgba(52, 210, 123, 0.5) inset, var(--shadow); } .ball-card.selected::after { content: "✓"; position: absolute; top: 8px; right: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--green-ink); font-size: 0.8rem; font-weight: 900; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .ball-card .ball-thumb { border-radius: 50%; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); } .ball-name { font-weight: 800; font-size: 0.95rem; } .ball-dino { font-size: 0.74rem; color: var(--amber); opacity: 0.92; } .prep-ball-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; } .prep-ball-label { font-size: 0.95rem; } /* Mini icono de bola en el HUD */ .hud-ball-mini { display: inline-flex; align-items: center; } .hud-ball-mini canvas { border-radius: 50%; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.5); } #hud-coins { color: var(--amber); } /* ===================== Tienda de Canje ===================== */ .shop-balance { text-align: center; font-size: 1.15rem; font-weight: 900; color: var(--amber); margin: 6px 0 14px; } .shop-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; } .shop-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(242, 193, 78, 0.3); background: rgba(9, 27, 18, 0.55); } .shop-icon { font-size: 2rem; width: 46px; text-align: center; flex-shrink: 0; } .shop-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left; } .shop-name { font-weight: 800; } .shop-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.3; } .shop-owned { font-size: 0.76rem; color: var(--bone); } .shop-owned b { color: var(--green); } .shop-buy { flex-shrink: 0; background: linear-gradient(180deg, #f7d06b, var(--amber-deep)); color: #3c2606; border-color: var(--amber-deep); font-weight: 800; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; min-width: 74px; } .shop-buy .sb-verb { font-size: 0.82rem; font-weight: 900; } .shop-buy .sb-cost { font-size: 0.72rem; opacity: 0.92; } .shop-buy.disabled { opacity: 0.5; filter: grayscale(0.4); } .shop-feedback { text-align: center; min-height: 1.2em; font-weight: 700; font-size: 0.9rem; margin: 4px 0 12px; } #screen-shop .btn.ghost { display: block; margin: 6px auto 0; } /* --- Vídeo recompensado por ⭐ dentro del Canje (Fase 1: SIMULADO tras flag) --------------- Misma familia visual que .shop-card (radio, borde, fondo translúcido) pero con acento VERDE en lugar de ámbar: en esta pantalla el ámbar es "gastar" y esta tarjeta es de "ganar". Mobile-first EN COLUMNA a propósito: el título y la etiqueta del botón son largos en ES y en EN ("📺 Ver vídeo y ganar estrellas" / "📺 Watch video +25 ⭐") y en fila no caben en un iPhone sin provocar desbordamiento horizontal. */ .reward-video { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(52, 210, 123, 0.34); background: linear-gradient(180deg, rgba(52, 210, 123, 0.10), rgba(52, 210, 123, 0) 62%), rgba(9, 27, 18, 0.55); } /* El atributo `hidden` debe seguir ganando al `display: flex` de arriba (si no, la hoja de estilos del navegador pierde por especificidad y el bloque se vería aunque esté oculto). */ .reward-video[hidden] { display: none; } .reward-video-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .reward-video-title { font-weight: 800; font-size: 0.95rem; line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; /* nunca desborda a lo ancho */ } /* Estado informativo: disponible · N/N hoy, cuenta atrás, límite diario, o "solo en la app". `min-height` reserva su hueco para que la tarjeta no dé saltos al cambiar de texto. */ .reward-video-status { font-size: 0.76rem; line-height: 1.3; color: var(--muted); min-height: 1.1em; overflow-wrap: anywhere; } #btn-reward-video { width: 100%; min-width: 0; min-height: 48px; /* área táctil */ margin: 0; padding: 10px 14px; font-size: 0.95rem; /* .btn.tiny usa 1.2rem: demasiado para esta etiqueta */ font-weight: 900; line-height: 1.2; white-space: normal; /* la etiqueta puede partir en dos líneas */ color: var(--green-ink); background: linear-gradient(180deg, #4ade8c, var(--green-deep)); border-color: #1a9450; box-shadow: 0 5px 0 #136e3a, var(--shadow-sm); } #btn-reward-video:hover { filter: brightness(1.06); } #btn-reward-video:not(.disabled):active { box-shadow: 0 2px 0 #136e3a; transform: translateY(3px) scale(0.99); } /* No disponible: flag OFF, web sin simulación, cooldown o límite diario alcanzado. Se mantiene CLICABLE a propósito —igual que `.shop-buy.disabled`—: el manejador responde con `sfx.nope()` y vuelve a pintar el estado, así el toque no queda sin respuesta. */ #btn-reward-video.disabled { opacity: 0.5; filter: grayscale(0.4); cursor: not-allowed; box-shadow: var(--shadow-sm); } @media (max-width: 380px) { .reward-video { padding: 10px 12px; gap: 6px; } .reward-video-title { font-size: 0.9rem; } #btn-reward-video { font-size: 0.9rem; padding: 9px 12px; } } /* Toggles de potenciador en preparación */ .prep-powerups { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; } .prep-powerups-label { font-size: 0.85rem; color: var(--muted); } .power-toggle { background: rgba(255, 255, 255, 0.08); } .power-toggle.active { background: rgba(52, 210, 123, 0.85); color: var(--green-ink); border-color: #eafff2; box-shadow: 0 0 0 2px rgba(52, 210, 123, 0.35); } /* ===================== Mundos en el selector de niveles ===================== */ .levels-list { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; } .world-header { display: flex; align-items: center; gap: 10px; margin: 10px 2px 2px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.03)); border: 1px solid rgba(242, 193, 78, 0.28); } .world-header.locked { opacity: 0.5; } .world-emoji { font-size: 1.3rem; } .world-name { font-weight: 800; font-size: 0.92rem; flex: 1; text-align: left; } .world-stars { font-size: 0.84rem; color: var(--amber); font-weight: 800; white-space: nowrap; } .level-card.done { box-shadow: inset 0 0 0 2px rgba(52, 210, 123, 0.45); } /* Personalidad de la bola */ .ball-blurb { font-size: 0.7rem; color: var(--muted); line-height: 1.25; text-align: center; margin-top: 2px; } /* Preparación: mundo + recompensas */ .prep-world { font-size: 0.9rem; font-weight: 800; color: var(--amber); margin: 0 0 4px; letter-spacing: 0.3px; } .prep-rewards { font-size: 0.95rem; color: var(--bone); margin: 4px 0 10px; } /* Misiones secundarias (= condiciones de estrella) en preparación */ .prep-missions { margin: 2px 0 10px; } .pm-title { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px; color: var(--amber); opacity: 0.9; margin-bottom: 5px; text-transform: uppercase; } .pm-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .pm-chip { font-size: 0.74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; color: var(--bone); border: 1px solid rgba(52,210,123,0.35); background: rgba(52,210,123,0.1); } /* Resultado ✓/✗ de misiones en la victoria (compacto, bajo las estrellas) */ .win-missions { display: flex; gap: 6px; justify-content: center; margin: -2px 0 2px; } .wm-chip { font-size: 0.74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; } .wm-chip.ok { color: #bff4d3; background: rgba(52,210,123,0.18); border-color: rgba(52,210,123,0.5); } .wm-chip.no { color: rgba(246,241,227,0.55); background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.12); } /* Victoria: recap de recogido + mensaje de desbloqueo */ .win-rewards { color: var(--amber) !important; font-weight: 700; } .win-unlock { color: var(--green); font-weight: 900; margin: 6px 0; animation: pop 0.45s ease; } /* Game Over: sugerencia de canje */ .over-canje { color: var(--amber-2); font-size: 0.9rem; margin: 8px 0 4px; } /* Pausa: poderes activos */ .pause-powers { color: var(--green); font-weight: 700; margin-top: 2px; min-height: 1em; } /* HUD: chip de poderes activos */ .hud-powers { color: var(--green); } /* ===================== Critters ambientales (ptero / diplodocus) ===================== */ /* Capa por ENCIMA del lienzo pero por DEBAJO del HUD/controles (z-index 0, tras el canvas en el DOM) y sin captura de puntero → nunca tapan la UI ni bloquean el input. */ #critter-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .critter { position: absolute; will-change: transform, opacity; } /* Pterodáctilo cruzando el cielo (banda alta, lejos de los controles inferiores) */ .ptero { top: 14%; left: 0; width: clamp(54px, 11vw, 100px); filter: drop-shadow(0 6px 6px rgba(0,0,0,0.3)); } .ptero-svg { width: 100%; height: auto; display: block; } .ptero.ltr .ptero-svg { transform: scaleX(-1); } /* mira hacia donde avanza */ .ptero-svg .pt-body { fill: #241f1b; } .ptero-svg .pw { fill: #2e2723; transform-box: view-box; transform-origin: 70px 42px; } .ptero-svg .pt-eye { fill: #ffce6b; } .ptero-svg .pw-l { animation: pteroFlapL 0.42s ease-in-out infinite; } .ptero-svg .pw-r { animation: pteroFlapR 0.42s ease-in-out infinite; } @keyframes pteroFlapL { 0%,100% { transform: rotate(2deg); } 50% { transform: rotate(16deg); } } @keyframes pteroFlapR { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(-16deg); } } /* Diplodocus asomándose por un lateral a media altura (encima de los controles, no los tapa) */ .diplo { bottom: 19%; height: clamp(150px, 31vh, 280px); } .diplo.left { left: 0; } .diplo.right { right: 0; } .diplo-svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 11px 10px rgba(0,0,0,0.30)); } .diplo.right .diplo-svg { transform: scaleX(-1); } /* mira hacia el centro */ /* — Materiales / sombreado — */ .diplo-svg .dp-fill { fill: url(#dpBody); } .diplo-svg .dp-leg-back { fill: url(#dpLeg); } .diplo-svg .dp-shadow { fill: #0a1f12; opacity: 0.16; } .diplo-svg .dp-belly { fill: #a4d49a; opacity: 0.42; } .diplo-svg .dp-spots ellipse { fill: #80c48b; opacity: 0.5; } .diplo-svg .dp-eye { fill: #16271b; } .diplo-svg .dp-eyeshine { fill: #ffffff; opacity: 0.92; } .diplo-svg .dp-nostril { fill: #2c5238; } .diplo-svg .dp-mouth { fill: none; stroke: #2b4d35; stroke-width: 2.4; stroke-linecap: round; } .diplo-svg .dp-toes path { fill: none; stroke: #2c5238; stroke-width: 2.2; stroke-linecap: round; opacity: 0.5; } .diplo-svg .dp-leaf-blade { fill: url(#dpLeaf); } .diplo-svg .dp-leaf-vein { fill: none; stroke: #2f7a28; stroke-width: 1.6; stroke-linecap: round; } /* — Animación (sincronizada con la entrada/salida del contenedor, 3,2 s) — */ .diplo-svg .dp-tail { transform-box: view-box; transform-origin: 64px 208px; animation: dpTail 2.6s ease-in-out infinite; } .diplo-svg .dp-neck { transform-box: view-box; transform-origin: 126px 174px; animation: dpNeck 3.2s ease-in-out both; } .diplo-svg .dp-head { transform-box: view-box; transform-origin: 158px 78px; animation: dpHead 3.2s ease-in-out both; } .diplo-svg .dp-leaf { transform-box: view-box; transform-origin: 205px 68px; animation: dpLeaf 3.2s ease both; } /* cola: vaivén suave y continuo (vida) */ @keyframes dpTail { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } } /* cuello: agacha al entrar → sube a la hoja → mastica → baja al salir */ @keyframes dpNeck { 0% { transform: rotate(9deg); } 18% { transform: rotate(9deg); } 30% { transform: rotate(-3deg); } 40% { transform: rotate(1deg); } 50% { transform: rotate(-3deg); } 62% { transform: rotate(0deg); } 78% { transform: rotate(7deg); } 100% { transform: rotate(11deg); } } /* cabeza: levanta el morro hacia la hoja y da dos mordiscos */ @keyframes dpHead { 0%, 24% { transform: rotate(0); } 31% { transform: rotate(-7deg); } 37% { transform: rotate(-1deg); } 45% { transform: rotate(-6deg); } 52% { transform: rotate(0); } 100% { transform: rotate(0); } } /* hoja: se la come (encoge y desaparece) cuando el morro llega */ @keyframes dpLeaf { 0%, 27% { opacity: 1; transform: scale(1); } 38% { opacity: 1; transform: scale(0.66); } 50% { opacity: 0; transform: scale(0.22); } 100% { opacity: 0; transform: scale(0.22); } } /* Familia Triceratops (evento de las 3 monedas) — paleta AMARILLO/MARRÓN premium. Va en #critter-layer (z-index < HUD/controles, pointer-events:none) → nunca tapa ni bloquea la interfaz; pasa por DETRÁS de los controles de las esquinas. */ .tri { bottom: max(6px, calc(env(safe-area-inset-bottom) + 4px)); left: 0; height: clamp(84px, 15vh, 152px); } .tri-svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 9px 9px rgba(0,0,0,0.30)); } .tri.rtl .tri-svg { transform: scaleX(-1); } /* mira hacia donde camina */ /* — Materiales / sombreado (amarillo dorado + marrón anaranjado + marfil) — */ .tri-svg .tri-fill { fill: url(#triBody); } .tri-svg .tri-leg-far { fill: #b3741c; } /* patas traseras: ámbar oscuro (profundidad) */ .tri-svg .tri-shadow { fill: #0a1f12; opacity: 0.18; } .tri-svg .tri-hi { fill: #ffe7a0; opacity: 0.32; } /* luz superior (volumen del lomo) */ .tri-svg .tri-ao { fill: #6e3d12; opacity: 0.20; } /* sombra de oclusión (vientre/mejilla) */ .tri-svg .tri-belly { fill: #f8e3a6; opacity: 0.55; } /* vientre crema cálido */ .tri-svg .tri-spots ellipse { fill: #bf6f1b; opacity: 0.5; } /* patrón dorsal marrón anaranjado */ .tri-svg .tri-frill { fill: url(#triFrill); stroke: #5e3310; stroke-width: 2; } .tri-svg .tri-frill-in { fill: #cf8a34; opacity: 0.55; } /* interior de la gola más claro (volumen) */ .tri-svg .tri-frill-lines path { fill: none; stroke: #6e3d12; stroke-width: 1.4; opacity: 0.4; } /* nervios de la gola */ .tri-svg .tri-frill-edge circle { fill: #f3ead0; } /* epoccipitales (borde de la gola) marfil */ .tri-svg .tri-horn { fill: #f3ead0; stroke: #c2a878; stroke-width: 1; } .tri-svg .tri-horn-bk { fill: #d8c49a; } /* cuerno trasero, más oscuro (profundidad) */ .tri-svg .tri-beak { fill: #5a3a1e; } .tri-svg .tri-mouth { fill: none; stroke: #4a2e16; stroke-width: 1.6; stroke-linecap: round; opacity: 0.7; } .tri-svg .tri-eyering { fill: #f8e3a6; } /* anillo cálido del ojo (mirada amable) */ .tri-svg .tri-eye { fill: #241a0e; } .tri-svg .tri-eyeshine { fill: #ffffff; opacity: 0.92; } .tri-svg .tri-toes path { fill: none; stroke: #7a4a14; stroke-width: 2.6; stroke-linecap: round; opacity: 0.55; } /* — Caminata: 4 patas en diagonal, bote con peso, vaivén de cabeza/cola y meneo de bebés — */ .tri-svg .tri-adult { transform-box: view-box; animation: triBob 0.56s ease-in-out infinite; } .tri-svg .tri-leg-a { transform-box: view-box; transform-origin: 250px 122px; animation: triStepA 0.56s ease-in-out infinite; } .tri-svg .tri-leg-b { transform-box: view-box; transform-origin: 312px 122px; animation: triStepB 0.56s ease-in-out infinite; } .tri-svg .tri-leg-c { transform-box: view-box; transform-origin: 237px 124px; animation: triStepB 0.56s ease-in-out infinite; } .tri-svg .tri-leg-d { transform-box: view-box; transform-origin: 309px 124px; animation: triStepA 0.56s ease-in-out infinite; } .tri-svg .tri-head { transform-box: view-box; transform-origin: 336px 96px; animation: triHead 1.12s ease-in-out infinite; } .tri-svg .tri-tail { transform-box: view-box; transform-origin: 210px 106px; animation: triTail 1.12s ease-in-out infinite; } .tri-svg .tri-baby-1 { transform-box: view-box; transform-origin: 150px 146px; animation: triWaddle 0.52s ease-in-out infinite; } .tri-svg .tri-baby-2 { transform-box: view-box; transform-origin: 64px 146px; animation: triWaddle 0.52s ease-in-out .26s infinite; } @keyframes triBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-2.6px) rotate(-0.5deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(-2.6px) rotate(0.5deg); } } @keyframes triStepA { 0%, 100% { transform: rotate(11deg); } 50% { transform: rotate(-11deg); } } @keyframes triStepB { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } } @keyframes triHead { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.6deg); } } @keyframes triTail { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } } @keyframes triWaddle { 0%, 100% { transform: translateY(0) rotate(-2.6deg); } 50% { transform: translateY(-2.4px) rotate(2.6deg); } } @media (prefers-reduced-motion: reduce) { .ptero-svg .pw-l, .ptero-svg .pw-r, .diplo-svg .dp-tail, .diplo-svg .dp-neck, .diplo-svg .dp-head, .diplo-svg .dp-leaf, .tri-svg .tri-adult, .tri-svg .tri-leg-a, .tri-svg .tri-leg-b, .tri-svg .tri-leg-c, .tri-svg .tri-leg-d, .tri-svg .tri-head, .tri-svg .tri-tail, .tri-svg .tri-baby-1, .tri-svg .tri-baby-2 { animation: none; } } /* ===================== Popups de puntos al recoger ===================== */ #fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; } .point-pop { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.05rem; color: var(--amber); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 10px rgba(255, 210, 80, 0.5); animation: pointFloat 0.95s ease-out forwards; white-space: nowrap; } .point-pop.star { font-size: 1.45rem; color: #ffe26a; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 200, 60, 0.7); } @keyframes pointFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 18% { opacity: 1; transform: translate(-50%, -62%) scale(1.12); } 100% { opacity: 0; transform: translate(-50%, -175%) scale(1); } } @media (prefers-reduced-motion: reduce) { .point-pop { animation-duration: 0.6s; } } /* ===================== Mono prehistórico burlón (al fallar) ===================== */ .taunt-monkey { position: absolute; bottom: 16%; display: flex; flex-direction: column; align-items: center; animation: tauntIn 1.5s ease-in-out forwards; } .taunt-monkey.left { left: 5%; } .taunt-monkey.right { right: 5%; } .taunt-monkey-art { width: 116px; height: 116px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); } .taunt-bubble { margin-bottom: 8px; background: #fff; color: #2a1d12; font-weight: 900; font-size: 0.9rem; padding: 5px 12px; border-radius: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); white-space: nowrap; position: relative; } .taunt-bubble::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; } @keyframes tauntIn { 0% { transform: translateY(130%) rotate(-6deg); opacity: 0; } 14% { transform: translateY(0) rotate(0); opacity: 1; } 22% { transform: translateY(0) rotate(-7deg); } 30% { transform: translateY(0) rotate(7deg); } 38% { transform: translateY(0) rotate(-4deg); } 46% { transform: translateY(0) rotate(0); } 82% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(130%) rotate(6deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .taunt-monkey { animation-duration: 1.1s; } } /* ===================== Monetización: sin vidas / vídeo / packs ===================== */ #screen-gameover .btn { display: block; margin: 9px auto 0; } .revive-box { margin: 14px 0; padding: 14px 12px; border-radius: 16px; background: rgba(52, 210, 123, 0.1); border: 1px solid rgba(52, 210, 123, 0.35); } .revive-title { font-weight: 800; color: var(--green); margin: 0 0 8px; } .revive-box .btn { display: block; margin: 8px auto 0; width: min(300px, 88%); } /* Vídeo recompensado (placeholder / simulación) */ .ad-tag { font-size: 0.72rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 10px; } .ad-screen { width: min(280px, 82%); height: 150px; margin: 0 auto 12px; border-radius: 14px; background: linear-gradient(160deg, #11202e, #0a3a2a); border: 1px solid rgba(242, 193, 78, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .ad-dino { font-size: 54px; animation: ballBob 1.6s ease-in-out infinite; } .ad-bars { display: flex; gap: 6px; align-items: flex-end; height: 28px; } .ad-bars span { width: 8px; height: 8px; background: var(--green); border-radius: 3px; animation: adBar 0.8s ease-in-out infinite; } .ad-bars span:nth-child(2) { animation-delay: 0.2s; } .ad-bars span:nth-child(3) { animation-delay: 0.4s; } @keyframes adBar { 0%, 100% { height: 8px; } 50% { height: 28px; } } .ad-countdown { font-size: 1.2rem; font-weight: 900; color: var(--amber); margin: 6px 0 12px; } #screen-adview .btn { display: block; margin: 4px auto 0; } /* Paquetes de vidas */ .pack-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(240, 88, 74, 0.3); background: rgba(40, 14, 14, 0.4); transition: transform 0.1s ease, border-color 0.15s ease; } .pack-card:hover { transform: translateY(-2px); border-color: rgba(240, 88, 74, 0.55); } .pack-lives { font-size: 1.45rem; flex-shrink: 0; } .pack-lives b { color: var(--red); margin-left: 2px; } .pack-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left; } .pack-name { font-weight: 800; } .pack-tag { font-size: 0.72rem; color: var(--green); font-weight: 700; } .pack-sub { font-size: 0.72rem; color: var(--muted); } .pack-buy { flex-shrink: 0; background: linear-gradient(180deg, #4ade8c, var(--green-deep)); color: var(--green-ink); border-color: #1a9450; font-weight: 800; white-space: nowrap; } #screen-lifepacks .btn:not(.pack-buy) { display: block; margin: 8px auto 0; } /* ===================== Ciclo 2 · animaciones y feedback ===================== */ /* Feedback de compra en la tienda */ .shop-feedback.ok { color: var(--green); } .shop-feedback.bad { color: var(--red); } .shop-feedback.show { animation: fbPop 0.42s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes fbPop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } /* Tarjetas de la tienda: hover con relieve */ .shop-card { transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease; } .shop-card:hover { transform: translateY(-2px); border-color: rgba(242, 193, 78, 0.5); background: rgba(9, 27, 18, 0.72); } .shop-buy:not(.disabled):active { transform: translateY(2px) scale(0.97); } /* Marca de nivel completado */ .level-card.done { position: relative; } .level-card.done::after { content: "✓"; position: absolute; top: 4px; right: 7px; font-size: 0.72rem; color: var(--green); font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } /* Botón de pausa con pequeño realce al pulsar */ .hud-top .btn.tiny:active { transform: scale(0.9); } /* El chip de monedas/poderes entra con un leve pop al cambiar */ .hud-powers { transition: opacity 0.2s ease; } /* ===================== Ajustes y Créditos ===================== */ /* Etiqueta de grupo (Audio / Datos) dentro de Ajustes */ .settings-group-label { text-align: center; margin: 14px 0 6px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); opacity: 0.85; } .settings-group-label:first-of-type { margin-top: 4px; } /* Toggles de audio: ancho coherente con el resto de botones del panel */ .settings-toggle { min-width: min(280px, 80vw); } /* Copyright discreto (no invasivo) — visible en vertical y horizontal */ .legal-copyright { margin: 14px 0 2px; font-size: 0.66rem; line-height: 1.3; color: var(--bone); opacity: 0.55; text-align: center; } .settings-lang { display: flex; justify-content: center; gap: 8px; margin: 8px auto 2px; } .settings-lang .lang-btn { min-width: 56px; } /* ---------- Ajustes en móvil vertical (iPhone / Android / navegador móvil) ---------- Bloque ACOTADO a #screen-settings: ninguna otra pantalla ni el gameplay se ven afectados. Objetivo: que quepa más contenido sin perder legibilidad y que SIEMPRE se pueda llegar al final (Reiniciar progreso · Cerrar sesión · Eliminación de cuenta · texto explicativo). La safe area NO se repite aquí: ya la aplica `.screen` en su padding. El margen inferior extra son píxeles planos, que se suman a esa safe area sin duplicarla. */ #screen-settings .panel { width: min(430px, 94vw); margin: 0 auto; padding: 20px 18px 34px; /* 34px de aire bajo el último texto */ } #screen-settings .title.small { margin: 2px 0 4px; font-size: clamp(1.5rem, 5.6vw, 2.2rem); } #screen-settings .settings-group-label { margin: 10px 0 5px; } #screen-settings .settings-group-label:first-of-type { margin-top: 2px; } /* Botones directos del panel (no los de la caja de confirmación, que conserva su maquetación). Altura AUTOMÁTICA con mínimo táctil de 48px: "Solicitar eliminación de cuenta" puede ocupar dos líneas en ES y EN sin cortarse. */ #screen-settings .panel > .btn { display: block; width: min(300px, 100%); min-width: 0; margin: 5px auto; min-height: 48px; height: auto; padding: 11px 16px; font-size: clamp(0.94rem, 3.6vw, 1.06rem); line-height: 1.25; white-space: normal; /* permite el salto a dos líneas */ } #screen-settings .settings-toggle { min-width: 0; } #screen-settings .settings-hint { margin: 3px auto 4px; max-width: min(300px, 100%); } #screen-settings .account-card { margin: 2px auto 6px; } #screen-settings .settings-lang { margin: 6px auto 2px; } #screen-settings .shop-feedback { margin: 2px 0 4px; } #screen-settings .legal-copyright { margin: 12px 0 0; } /* Teléfonos bajos (SE / iPhone mini): un punto más de compresión, sin bajar de 46px táctiles. */ @media (max-height: 700px) { #screen-settings .panel { padding: 14px 16px 30px; } #screen-settings .panel > .btn { min-height: 46px; padding: 9px 14px; margin: 4px auto; } #screen-settings .settings-group-label { margin: 7px 0 4px; } #screen-settings .title.small { margin: 0 0 2px; } } /* Caja de confirmación de reinicio (destructivo → borde rojo) */ .confirm-box { margin: 12px auto 4px; padding: 14px 16px; max-width: min(320px, 86vw); border: 1px solid rgba(229, 96, 86, 0.55); border-radius: 14px; background: rgba(40, 14, 12, 0.55); } .confirm-box p { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.4; } .confirm-box .btn { width: 100%; margin: 6px 0 0; } #btn-reset-yes { background: linear-gradient(180deg, #e56056, #b8332a); border-color: #b8332a; } /* Botón "Reiniciar progreso" sutilmente marcado como destructivo */ #btn-set-reset { border-color: rgba(229, 96, 86, 0.5); } /* Cuerpo de los créditos */ .credits-body { text-align: center; line-height: 1.7; font-size: 0.96rem; max-width: min(420px, 88vw); margin: 8px auto 18px; color: var(--cream); } .credits-body strong { font-size: 1.2rem; color: var(--amber); } /* ===================== Acceso / registro (pantalla de auth) ===================== */ /* Tarjeta de acceso PREMIUM: verde oscuro elegante con ligera transparencia, borde dorado sutil y sombras suaves en capas. Equilibrada en desktop; casi full-width cómoda en móvil. */ .auth-panel { width: min(440px, calc(100vw - 28px)); padding: 26px 26px 18px; background: linear-gradient(168deg, rgba(16, 44, 29, 0.92) 0%, rgba(10, 30, 20, 0.94) 55%, rgba(7, 22, 14, 0.96) 100%); border: 1px solid rgba(242, 193, 78, 0.34); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 42px rgba(46, 204, 113, 0.05); } .auth-emblem { width: 82px; height: 82px; font-size: 40px; margin-bottom: 2px; } .auth-title { margin: 2px 0 6px; } .auth-subtitle { font-size: 0.94rem; margin: 0 auto 18px; opacity: 0.9; line-height: 1.5; max-width: 34ch; } .auth-view { display: flex; flex-direction: column; gap: 11px; } .auth-view .btn { width: 100%; margin: 0; min-height: 48px; } /* Invitado: acción TERCIARIA (siempre disponible, pero sin robar protagonismo). */ .btn.auth-guest { font-size: 0.95rem; font-weight: 700; min-height: 46px; background: rgba(255, 255, 255, 0.055); color: var(--cream); border: 1px solid rgba(246, 241, 227, 0.2); box-shadow: none; opacity: 0.92; } .btn.auth-guest:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; } .auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .auth-row2 .btn { width: 100%; } /* Secundarios (correo): con presencia propia, por debajo de Google. (.btn.auth-alt gana a .btn.ghost) */ .btn.auth-alt { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.34); font-weight: 800; opacity: 1; } .btn.auth-alt:hover { background: rgba(46, 204, 113, 0.18); border-color: rgba(46, 204, 113, 0.5); } /* En móvil estrecho, los botones de correo se apilan en columna (mejor zona táctil). */ @media (max-width: 430px) { .auth-panel { padding: 22px 16px 14px; } .auth-row2 { grid-template-columns: 1fr; } } /* Label del botón de registro según modo: nube → «Crear cuenta con email». */ .auth-alt .cloud-only { display: none; } body.cloud-auth .auth-alt .cloud-only { display: inline; } body.cloud-auth .auth-alt .demo-only { display: none; } /* ===== Cumplimiento Play Store — OCULTAR funciones simuladas (sin romper el flujo) ===== Google Sign-In es REAL desde v0.27.1 → se muestra SOLO en modo NUBE (body.cloud-auth, es decir, Firebase configurado y disponible). En modo demo sigue oculto: un botón de Google no operativo sería "Deceptive Behavior". Apple/Samsung siguen placeholder → siempre ocultos. Ver docs/play-store-policy-audit.md. */ #auth-home .btn.provider { display: none !important; } /* proveedores no operativos (Apple/Samsung/demo) */ body.cloud-auth #auth-home .provider-google { display: flex !important; } /* Google REAL (solo nube) */ #btn-over-video, /* "Ver vídeo" (anuncio recompensado SIMULADO) */ #btn-over-buylives { display: none !important; } /* "Comprar vidas" (precios € sin pago real) */ /* Divisor "o continúa con" */ .auth-divider { display: flex; align-items: center; gap: 10px; margin: 6px 2px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(246,241,227,0.28), transparent); } /* Botones de proveedor. GOOGLE (real): botón claro estilo oficial — fondo blanco, logo multicolor, texto oscuro, contenido centrado y buena zona táctil. Es el CTA principal. */ .btn.provider { display: flex; align-items: center; justify-content: center; gap: 11px; background: rgba(9, 27, 18, 0.72); border: 1px solid rgba(246,241,227,0.22); font-weight: 700; } .btn.provider:active { transform: translateY(1px) scale(0.99); } .provider-ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; color: #0b1f14; } .provider-ic svg { display: block; } .btn.provider.provider-google { min-height: 52px; font-size: 1.02rem; font-weight: 800; background: #ffffff; color: #1f2937; border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), 0 10px 22px rgba(0, 0, 0, 0.3); } .btn.provider.provider-google:hover { background: #f6f8ff; filter: none; } .btn.provider.provider-google:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); transform: translateY(2px) scale(0.995); } .btn.provider.provider-google .provider-ic { background: #ffffff; } .provider-apple .provider-ic { background: #f3f1ea; color: #111; } .provider-samsung .provider-ic { background: #1f6fe5; color: #fff; } .provider-apple { border-color: rgba(240,240,235,0.4); } .provider-samsung { border-color: rgba(31,111,229,0.5); } /* Campos de formulario */ .auth-field { display: flex; flex-direction: column; gap: 5px; text-align: left; } .auth-field > span { font-size: 0.8rem; font-weight: 800; color: var(--amber); letter-spacing: 0.02em; } .auth-field input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 12px 14px; min-height: 48px; border-radius: 12px; background: rgba(6, 20, 13, 0.7); color: var(--cream); border: 1px solid rgba(242,193,78,0.32); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .auth-field input::placeholder { color: rgba(246,241,227,0.4); } .auth-field input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242,193,78,0.22); } .auth-check { display: flex; align-items: flex-start; gap: 9px; text-align: left; font-size: 0.9rem; color: var(--cream); line-height: 1.35; } .auth-check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; accent-color: var(--green); } .auth-error { color: var(--red); font-size: 0.86rem; min-height: 1.1em; margin: 2px 0; font-weight: 700; } /* En la vista principal, el error vacío no reserva hueco (compacta Google/correo/invitado). */ #auth-home-error:empty { display: none; } .auth-demo { font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; line-height: 1.4; } /* Aviso de "Google solo en web" (apps nativas / navegador embebido). Discreto, ocupa el ancho del panel y parte por palabras: no añade altura fija ni puede desbordar en pantallas estrechas. Sin `display` propio, para que el atributo `hidden` siga funcionando cuando Google sí está. */ .auth-note { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; line-height: 1.4; text-align: center; max-width: 100%; overflow-wrap: anywhere; } /* — Cuenta/nube (Firebase-ready): alterna textos/campos según modo demo vs nube — */ /* Mensaje de CONFIANZA bajo las acciones: línea sutil (sin caja pesada), legible y discreta. */ .auth-mode-msg { font-size: 0.8rem; font-weight: 700; color: var(--bone); margin: 14px auto 0; line-height: 1.4; max-width: 36ch; opacity: 0.85; } body.cloud-auth .auth-mode-msg { color: #cfe9d8; } /* Por defecto (modo demo) se ocultan los campos solo-nube; en modo nube, al revés. */ .cloud-only { display: none; } body.cloud-auth .cloud-only { display: block; } body.cloud-auth .auth-field.cloud-only { display: flex; } body.cloud-auth .demo-only { display: none; } /* Enlace "¿Olvidaste tu contraseña?" con aspecto de enlace (no botón pesado) */ .link-btn { background: none; border: none; box-shadow: none; min-width: 0; min-height: auto; color: var(--amber); text-decoration: underline; font-size: 0.84rem; font-weight: 700; padding: 4px 6px; margin: 2px auto 0; cursor: pointer; } .link-btn:hover { filter: brightness(1.1); background: none; } /* Tarjeta de cuenta + estado de sincronización en Ajustes */ .account-card { text-align: left; margin: 2px auto 8px; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,0.28); border: 1px solid rgba(242,193,78,0.26); width: min(320px, 92%); } .account-line { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 0.9rem; font-weight: 700; color: var(--cream); } .account-line .account-ic { font-size: 1rem; } .account-line.sync-line { color: var(--bone); font-size: 0.82rem; font-weight: 600; } #sync-status { color: var(--green); } /* Vista de proveedor (placeholder) */ .auth-provider-ic { font-size: 44px; margin: 6px 0 2px; } .auth-provider-name { font-size: 1.3rem; font-weight: 900; color: var(--amber); margin: 0 0 6px; } .auth-provider-msg { font-size: 1rem; color: var(--cream); margin: 0 0 4px; } /* Pie legal + enlaces */ .auth-foot { font-size: 0.76rem; color: var(--muted); margin: 10px 0 6px; line-height: 1.5; } .auth-foot a { color: var(--amber); text-decoration: underline; cursor: pointer; } /* Selector de idioma DISCRETO al pie de la tarjeta de acceso. */ .auth-panel .lang-select { margin-top: 6px; opacity: 0.72; transition: opacity 0.15s ease; } .auth-panel .lang-select:hover, .auth-panel .lang-select:focus-within { opacity: 1; } .auth-panel .lang-label { font-size: 0.74rem; } .auth-panel .lang-btn { min-height: 34px; padding: 4px 12px; font-size: 0.82rem; } .legal-body { text-align: left; line-height: 1.55; font-size: 0.95rem; color: var(--cream); margin: 6px 0 16px; } .legal-body p { margin: 0 0 12px; } .legal-body strong { color: var(--amber); } /* Saludo en el menú */ .menu-greeting { margin: 2px 0 4px; font-size: 0.92rem; font-weight: 800; color: var(--green); min-height: 1em; } .menu-greeting:empty { display: none; } /* ===================== Ciclo 3 · QA visual / mobile ===================== */ /* Evita que el nombre del nivel y de los mundos desborden o saturen el HUD. */ #hud-level { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .world-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La pantalla de niveles puede ser alta (5 mundos): scroll interno cómodo. */ .levels-list { width: 100%; } @media (max-width: 560px) { .hud-top { row-gap: 4px; } #hud-level { max-width: 40vw; } .shop-icon { font-size: 1.7rem; width: 40px; } .shop-desc { font-size: 0.74rem; } .world-name { font-size: 0.86rem; } } @media (max-width: 380px) { .hud-chip { font-size: 0.7rem; padding: 4px 8px; } #hud-time { display: none; } /* prioriza nivel/vidas/puntos/monedas en pantallas muy estrechas */ #hud-level { max-width: 34vw; } } /* ============================ Responsive ============================ */ /* Tablet / desktop amplio: un poco más de aire */ @media (min-height: 720px) and (min-width: 600px) { .menu-panel { width: min(440px, 92vw); padding: 26px 24px 20px; gap: 18px; } .cta-main { font-size: 1.24rem; } .cta-hero { font-size: 1.4rem; } .menu-avatar canvas { width: 66px; height: 66px; } } /* Pantallas estrechas: HUD compacto, paneles y botones cómodos */ @media (max-width: 560px) { .hud-top { gap: 6px; padding: max(8px, env(safe-area-inset-top)) 8px 8px; } .hud-chip { font-size: 0.74rem; padding: 5px 10px; } .hud-ball-mini canvas { width: 30px; height: 30px; } .panel { width: 94vw; padding: 22px 16px; } .menu-panel { padding: 18px 15px 16px; gap: 13px; } .balls-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; } .levels-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; } .title { letter-spacing: 0.3px; } .ball-emblem.big { width: 118px; height: 118px; font-size: 60px; } } /* Móviles muy estrechos */ @media (max-width: 380px) { .panel { padding: 20px 13px; border-radius: 20px; } .btn { font-size: 1rem; padding: 13px 18px; } .levels-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); } /* Menú: pills y tiles más compactos para que nada se corte. */ .menu-panel { gap: 12px; } .menu-pills { gap: 6px; } .menu-pills .stat-pill { font-size: 0.74rem; padding: 6px 4px; white-space: nowrap; } .menu-pills .pill-ic { font-size: 0.85rem; } .menu-tiles { gap: 8px; } .tile-ic { font-size: 1.55rem; } .tile-label { font-size: 0.74rem; } .util-btn { min-width: 72px; font-size: 0.8rem; padding: 8px 8px; } } /* Dispositivos táctiles: objetivos grandes */ @media (pointer: coarse) { .btn { min-height: 48px; } .btn.ghost { min-height: 42px; } .ball-card, .level-card { min-height: 54px; } .menu-tile { min-height: 64px; } .util-btn { min-height: 44px; } .joystick { opacity: 0.9; } } /* Paisaje en móviles bajos: paneles compactos, controles a los lados (alcance del pulgar) */ @media (max-height: 480px) and (orientation: landscape) { .screen { padding: 10px 16px; } .panel { max-height: 96vh; padding: 14px 20px; } .title { font-size: clamp(1.5rem, 6vw, 2.1rem); margin: 4px 0; } .title.small { font-size: clamp(1.3rem, 5vw, 1.8rem); } .subtitle { margin-bottom: 10px; } .ball-emblem.big { width: 64px; height: 64px; font-size: 32px; } .ball-emblem { width: 58px; height: 58px; font-size: 28px; } .win-emoji, .over-emoji { font-size: 32px; margin: 0; } .stars-row { font-size: 1.8rem; margin: 2px 0; } /* Menú en paisaje: aprovecha el ancho → CTAs en par y tiles en una sola fila. */ .menu-panel { width: min(620px, 96vw); max-height: 96dvh; gap: 11px; padding: 12px 18px; } .menu-head { gap: 11px; } .menu-avatar canvas { width: 48px; height: 48px; } .menu-stats { padding: 9px 12px; gap: 8px; } .menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .menu-cta.no-continue { grid-template-columns: 1fr; } .cta-main, .cta-hero { font-size: 1.08rem; padding: 12px 14px; } .menu-tiles { grid-template-columns: repeat(6, 1fr); gap: 8px; } .tile-ic { font-size: 1.4rem; } .menu-util { padding-top: 9px; } .progress-wrap { margin: 8px auto 0; } .floaty { display: none; } .hud-hint { top: calc(env(safe-area-inset-top) + 44px); } .joystick { width: 96px; height: 96px; right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); } .joystick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; } .dpad { width: 138px; height: 138px; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); } .dpad-btn { font-size: 1.4rem; } } /* ===================== Perfil de dispositivo (clases puestas por JS) ===================== */ /* Teléfono pequeño (lado corto ≤ 380): controles algo más compactos (sin perder toque cómodo) y HUD muy compacto, para dejar más sitio al tablero. */ body.is-small-phone.is-touch .dpad { width: 146px; height: 146px; gap: 5px; } body.is-small-phone.is-touch .joystick { width: 100px; height: 100px; } body.is-small-phone.is-touch .joystick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; } body.is-small-phone .hud-chip { font-size: 0.68rem; padding: 4px 8px; } body.is-small-phone .hud-top { gap: 5px; } body.is-small-phone #hud-level { max-width: 32vw; } /* La familia Triceratops, algo más baja en teléfonos pequeños (tapa aún menos el tablero). */ body.is-small-phone .tri { height: clamp(68px, 12vh, 120px); } /* Móvil en horizontal: HUD en una franja compacta arriba; nada se sale ni tapa el tablero. Se mantiene flex-wrap (heredado) para que el botón de pausa NUNCA se recorte. */ /* HUD compacto: franja más fina arriba → el tablero (ya más grande) gana espacio vertical. */ body.is-landscape-mobile .hud-top { gap: 4px; padding: max(4px, env(safe-area-inset-top)) 8px 4px; } /* v0.25.4: chips un punto más legibles en horizontal (0.66 → 0.72rem) sin recortar el tablero. */ body.is-landscape-mobile .hud-chip { font-size: 0.72rem; padding: 3px 8px; } body.is-landscape-mobile #hud-time { display: none; } /* prioriza nivel/vidas/puntos/monedas */ body.is-landscape-mobile #hud-level { max-width: 24vw; } body.is-landscape-mobile .hud-ball-mini canvas { width: 26px; height: 26px; } body.is-landscape-mobile .hud-top .btn.tiny { padding: 4px 8px; } body.is-landscape-mobile .hud-hint { display: none; } /* en horizontal estorba más que ayuda */ body.is-landscape-mobile .tri { height: clamp(56px, 18vh, 116px); } /* Protagonismo del TABLERO en horizontal: el paisaje de fondo pesa un punto menos y la viñeta separa el tablero del entorno (sin ocultar el fondo). Solo durante el gameplay landscape. */ body.is-landscape-mobile #game-canvas { background-image: linear-gradient(180deg, rgba(9, 27, 18, 0.44) 0%, rgba(9, 27, 18, 0.30) 38%, rgba(9, 27, 18, 0.64) 100%), var(--bg-jungle); } body.is-landscape-mobile #vignette { background: radial-gradient(120% 100% at 50% 46%, transparent 46%, rgba(7, 20, 12, 0.64) 100%); } /* ============================================================================ Evolución v0.20 — clima, jefes, contrarreloj, skins, cofre, diario ============================================================================ */ /* --- Capa de clima: por ENCIMA del lienzo, por DEBAJO del HUD/controles ----- */ #weather-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .weather { position: absolute; inset: 0; } /* Partículas que caen (lluvia / ceniza / tormenta) */ .wx-p { position: absolute; top: -12vh; will-change: transform, opacity; animation: wxFall linear infinite; } .wx-rain { width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, rgba(180,220,255,0), rgba(180,220,255,0.7)); } .wx-storm { width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, rgba(200,225,255,0), rgba(220,235,255,0.85)); } .wx-ash { width: 6px; height: 6px; border-radius: 50%; background: rgba(220,210,200,0.5); box-shadow: 0 0 4px rgba(255,180,120,0.35); } @keyframes wxFall { 0% { transform: translateY(-12vh); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(112vh); opacity: 0.9; } } /* Viento: ráfagas/hojas horizontales */ .wx-gust { position: absolute; left: -12vw; font-size: 1.1rem; opacity: 0.7; color: rgba(220,255,210,0.7); width: 30px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); will-change: transform; animation: wxGust linear infinite; } .wx-gust:not(:empty) { background: none; width: auto; height: auto; } @keyframes wxGust { 0% { transform: translateX(-12vw); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translateX(114vw); opacity: 0; } } /* Niebla / calor: bandas suaves a la deriva */ .wx-band { position: absolute; left: -20%; width: 140%; height: 40%; opacity: 0.5; will-change: transform; } .weather-fog .wx-band { background: radial-gradient(60% 100% at 50% 50%, rgba(230,235,230,0.55), rgba(230,235,230,0)); } .weather-heat .wx-band { background: radial-gradient(60% 100% at 50% 50%, rgba(255,150,80,0.16), rgba(255,150,80,0)); } .wx-band.b0 { top: 12%; animation: wxDrift 16s ease-in-out infinite; } .wx-band.b1 { top: 42%; animation: wxDrift 22s ease-in-out infinite reverse; } .wx-band.b2 { top: 68%; animation: wxDrift 19s ease-in-out infinite; } @keyframes wxDrift { 0%,100% { transform: translateX(-4%); } 50% { transform: translateX(6%); } } /* Tormenta: destellos esporádicos (sutiles, no ciegan) */ .wx-flash { position: absolute; inset: 0; background: rgba(220,235,255,0); animation: wxFlash 7s linear infinite; } @keyframes wxFlash { 0%,93%,100% { background: rgba(220,235,255,0); } 94% { background: rgba(220,235,255,0.18); } 95% { background: rgba(220,235,255,0.02); } 96% { background: rgba(220,235,255,0.14); } 97% { background: rgba(220,235,255,0); } } @media (prefers-reduced-motion: reduce) { .wx-p, .wx-gust, .wx-band, .wx-flash { animation-duration: 0.001s !important; opacity: 0.18; } } /* --- Banner de jefe (intro) ------------------------------------------------ */ .boss-banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%) translateY(-8px); display: flex; align-items: center; gap: 10px; z-index: 4; pointer-events: none; padding: 10px 18px; border-radius: 16px; opacity: 0; background: linear-gradient(180deg, rgba(60,20,10,0.92), rgba(30,8,4,0.92)); border: 2px solid var(--amber); box-shadow: var(--shadow-lg), 0 0 22px rgba(242,193,78,0.4); color: var(--cream); font-weight: 900; letter-spacing: 0.3px; } .boss-banner.show { animation: bossIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .boss-banner .boss-emoji { font-size: 1.7rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .boss-banner .boss-text { font-size: 1.05rem; text-shadow: 0 2px 6px rgba(0,0,0,0.6); } @keyframes bossIn { 0% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(0.92); } 14% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 82% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.98); } } /* --- HUD contrarreloj ------------------------------------------------------ */ .hud-chip.hud-ta { color: #fff; background: linear-gradient(180deg, rgba(244,162,97,0.9), rgba(181,121,31,0.9)); border-color: var(--amber); font-weight: 900; } .hud-chip.hud-ta.danger { animation: taPulse 0.7s ease-in-out infinite; background: linear-gradient(180deg, var(--red), var(--red-deep)); border-color: var(--red); } @keyframes taPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* --- Chips de evento en preparación ---------------------------------------- */ .prep-events { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 4px 0 12px; } .ev-chip { font-size: 0.76rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.3); } .ev-chip.ev-boss { color: #ffd9c0; border-color: var(--amber); background: rgba(120,40,20,0.5); } .ev-chip.ev-ta { color: #fff; border-color: var(--amber-2); background: rgba(181,121,31,0.45); } .ev-chip.ev-wx { color: #d6eaff; border-color: rgba(150,200,255,0.5); background: rgba(20,50,80,0.4); } /* ===================== Skins (colección PREMIUM) ===================== */ .skins-panel { width: min(680px, 96vw); text-align: left; padding: 22px 22px 18px; background: radial-gradient(120% 80% at 50% -8%, rgba(242,193,78,0.10), transparent 60%), linear-gradient(180deg, rgba(18,44,30,0.88), rgba(9,24,16,0.93)); border: 1px solid rgba(242,193,78,0.45); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); } /* Header: emblema + título/subtítulo + badge de estrellas */ .skins-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 14px; } .skins-emblem { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: radial-gradient(circle at 35% 28%, #2a8d54, #145e33 60%, #0a3a20); border: 2px solid rgba(242,193,78,0.7); box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15); } .skins-headtext { min-width: 0; } .skins-title { margin: 0; font-size: clamp(1.4rem, 5vw, 1.95rem); font-weight: 900; letter-spacing: 0.4px; line-height: 1.05; color: var(--amber); text-shadow: 0 2px 0 var(--amber-deep), 0 6px 14px rgba(0,0,0,0.5); } .skins-sub { margin: 3px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.35; } .skins-stars { display: inline-flex; align-items: center; gap: 6px; align-self: start; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, rgba(242,193,78,0.18), rgba(0,0,0,0.3)); border: 1px solid rgba(242,193,78,0.5); } .skins-stars-ic { font-size: 1rem; } .skins-stars-lbl { font-size: 0.74rem; color: var(--bone); font-weight: 700; } .skins-stars b { color: var(--amber); font-weight: 900; font-size: 1.05rem; } /* Grid: 4 columnas (× 2 filas = 8 skins) */ .skins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 12px; } /* Tarjeta */ .skin-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; border-radius: 18px; cursor: pointer; font-family: inherit; color: var(--cream); border: 1.5px solid rgba(242,193,78,0.28); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.18)); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05); transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; overflow: hidden; } .skin-card::before { /* glint diagonal sutil al hover (premium) */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%); transition: opacity 0.2s ease; } .skin-card:hover { transform: translateY(-4px); background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(0,0,0,0.15)); border-color: rgba(242,193,78,0.55); box-shadow: var(--shadow); } .skin-card:hover::before { opacity: 1; } .skin-card:active { transform: scale(0.96); } /* Orbe con la bola */ .skin-orb { position: relative; width: 88px; height: 88px; display: grid; place-items: center; } .skin-orb-ring { position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, transparent 58%, rgba(242,193,78,0.18) 72%, transparent 78%); } .skin-thumb { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 8px 18px rgba(0,0,0,0.45); } /* Nombre + estado */ .skin-name { font-weight: 800; font-size: 0.86rem; text-align: center; line-height: 1.12; } .skin-status { font-size: 0.72rem; font-weight: 700; text-align: center; min-height: 1.1em; opacity: 0.96; } .skin-status.state-equipped { color: var(--green); } .skin-status.state-buy { color: var(--amber); } .skin-status.state-owned, .skin-status.state-stars, .skin-status.state-chest { color: var(--bone); } /* Chips: rareza (izq) + tipo (der) */ .skin-rarity { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; color: #06240f; background: linear-gradient(180deg, #d3dde4, #98a6b0); } .skin-type { position: absolute; top: 7px; right: 9px; z-index: 2; font-size: 0.95rem; opacity: 0.9; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .rar-base .skin-rarity { background: linear-gradient(180deg, #b9f5cf, #5fbf86); } .rar-rara .skin-rarity { background: linear-gradient(180deg, #9fd8ff, #3f93d6); color: #04263f; } .rar-epica .skin-rarity { background: linear-gradient(180deg, #d9a6ff, #8a4fd0); color: #fff; } .rar-legendaria .skin-rarity { background: linear-gradient(180deg, #ffe08a, #e2a522); } .rar-epica { border-color: rgba(160,90,210,0.5); } .rar-legendaria { border-color: rgba(242,193,78,0.6); } /* Equipada: glow verde + check + etiqueta */ .skin-equip-tag { display: none; } .skin-card.selected { border-color: var(--green); background: linear-gradient(180deg, rgba(52,210,123,0.20), rgba(0,0,0,0.12)); box-shadow: 0 0 0 2px rgba(52,210,123,0.5) inset, 0 0 22px rgba(52,210,123,0.35), var(--shadow); animation: skinEquipGlow 2.4s ease-in-out infinite; } .skin-card.selected .skin-orb-ring { background: radial-gradient(circle, transparent 56%, rgba(52,210,123,0.42) 70%, transparent 78%); animation: skinRingPulse 2s ease-in-out infinite; } .skin-card.selected .skin-equip-tag { display: inline-block; position: absolute; top: 8px; right: 8px; z-index: 3; font-size: 0.58rem; font-weight: 900; color: var(--green-ink); background: var(--green); padding: 3px 8px; border-radius: 999px; box-shadow: var(--shadow-sm); } .skin-card.selected .skin-type { display: none; } @keyframes skinEquipGlow { 0%,100% { box-shadow: 0 0 0 2px rgba(52,210,123,0.5) inset, 0 0 14px rgba(52,210,123,0.28), var(--shadow); } 50% { box-shadow: 0 0 0 2px rgba(52,210,123,0.6) inset, 0 0 26px rgba(52,210,123,0.46), var(--shadow); } } @keyframes skinRingPulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } } /* Bloqueada: elegante (no muerta) */ .skin-card.locked .skin-thumb { filter: saturate(0.72) brightness(0.82); } .skin-card.locked .skin-name { opacity: 0.85; } .skin-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; border-radius: 50%; background: rgba(6,20,12,0.42); text-shadow: 0 2px 6px rgba(0,0,0,0.6); } .skin-card[data-state="chest"] .skin-lock { background: rgba(40,20,6,0.42); } /* Botón Volver premium */ .skins-back { display: block; margin: 8px auto 0; min-width: 170px; min-height: 46px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22)); border: 1.5px solid rgba(242,193,78,0.5); color: var(--cream); font-weight: 800; } .skins-back:hover { background: rgba(242,193,78,0.14); border-color: var(--amber); } /* Sacudida al tocar una skin bloqueada */ .skin-card.shake { animation: skinShake 0.4s ease; } @keyframes skinShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} } @media (prefers-reduced-motion: reduce) { .skin-card.selected, .skin-card.selected .skin-orb-ring, .skin-card.shake { animation: none; } } /* Responsive */ @media (max-width: 600px) { .skins-grid { grid-template-columns: repeat(2, 1fr); } /* móvil vertical: 2 columnas */ .skins-head { grid-template-columns: auto 1fr; row-gap: 8px; } .skins-stars { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 380px) { .skins-panel { padding: 18px 14px 14px; } .skin-orb { width: 78px; height: 78px; } .skin-thumb { width: 74px; height: 74px; } } /* Móvil HORIZONTAL: 4 columnas × 2 filas, panel ancho y bajo */ @media (max-height: 480px) and (orientation: landscape) { .skins-panel { width: min(880px, 96vw); max-height: 96dvh; padding: 12px 18px; } .skins-head { margin-bottom: 8px; } .skins-emblem { width: 44px; height: 44px; font-size: 24px; } .skins-sub { display: none; } .skins-grid { grid-template-columns: repeat(4, 1fr); gap: 9px; } .skin-card { padding: 9px 6px 8px; gap: 5px; } .skin-orb { width: 62px; height: 62px; } .skin-thumb { width: 58px; height: 58px; } .skins-back { margin-top: 4px; min-height: 42px; } } /* Habilidad en el selector de bola */ .ball-ability { font-size: 0.72rem; color: #cde7d3; line-height: 1.3; text-align: center; padding: 0 2px; } .ball-ability b { color: var(--green); } .ball-blurb { font-size: 0.72rem; color: var(--muted); line-height: 1.3; text-align: center; } /* --- Cofre jurásico -------------------------------------------------------- */ .chest-stage { display: grid; place-items: center; height: 150px; margin: 6px auto 4px; } .chest-box { position: relative; width: 120px; height: 96px; } .chest-body { position: absolute; bottom: 0; left: 0; right: 0; height: 64px; border-radius: 10px 10px 12px 12px; background: linear-gradient(180deg, #8a5a2a, #5a3818); border: 3px solid #3a2410; box-shadow: inset 0 -8px 16px rgba(0,0,0,0.4), var(--shadow); display: grid; place-items: center; } .chest-body .chest-amber { font-size: 1.5rem; filter: drop-shadow(0 0 8px rgba(255,180,60,0.8)); } .chest-lid { position: absolute; top: 0; left: -2px; right: -2px; height: 42px; transform-origin: bottom center; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #a06a30, #6a4420); border: 3px solid #3a2410; box-shadow: inset 0 6px 12px rgba(255,220,150,0.18); transition: transform 0.4s cubic-bezier(0.34,1.4,0.5,1); } .chest-box.open .chest-lid { transform: rotateX(58deg) translateY(-8px); } .chest-box.ready { animation: chestBob 1.8s ease-in-out infinite; } .chest-box.ready .chest-body { box-shadow: inset 0 -8px 16px rgba(0,0,0,0.4), 0 0 26px rgba(255,190,70,0.55); } @keyframes chestBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .chest-sparkle { position: absolute; opacity: 0; font-size: 1.1rem; } .chest-box.ready .chest-sparkle, .chest-box.open .chest-sparkle { animation: chestSpark 1.6s ease-in-out infinite; } .chest-sparkle.s1 { top: -6px; left: 4px; animation-delay: 0s; } .chest-sparkle.s2 { top: 2px; right: -2px; animation-delay: 0.5s; } .chest-sparkle.s3 { top: -10px; left: 50%; animation-delay: 0.9s; } @keyframes chestSpark { 0%,100% { opacity: 0; transform: translateY(2px) scale(0.8); } 50% { opacity: 1; transform: translateY(-6px) scale(1.1); } } .chest-count { font-size: 1.1rem; font-weight: 900; color: var(--amber); margin: 6px 0 2px; } /* Barra de progreso de estrellas hacia el próximo cofre */ .chest-bar { width: min(280px, 80%); height: 9px; margin: 4px auto 6px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,0.32); border: 1px solid rgba(242,193,78,0.28); } .chest-bar-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--amber)); box-shadow: 0 0 10px rgba(255,190,70,0.45); transition: width 0.5s ease; } /* Estado bloqueado elegante (aún sin cofres): cofre atenuado, no apagado */ .chest-box.locked { filter: grayscale(0.4) brightness(0.85); opacity: 0.95; transition: filter 0.3s ease; } .chest-box.ready { filter: none; } .chest-reveal { min-height: 1.4em; font-weight: 900; font-size: 1.05rem; color: var(--green); margin: 8px 0; } .chest-reveal.show { animation: fbPop 0.5s cubic-bezier(0.22,1,0.36,1); } #btn-chest-open.disabled { opacity: 0.5; filter: grayscale(0.4); } /* --- Recompensa diaria ----------------------------------------------------- */ .daily-streak { font-size: 1.05rem; font-weight: 900; color: var(--amber-2); margin: 6px 0 10px; } .daily-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 12px; } .daily-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; border-radius: 12px; border: 1px solid rgba(242,193,78,0.3); background: rgba(9,27,18,0.5); font-size: 0.72rem; } .daily-cell .daily-day { font-size: 0.62rem; color: var(--muted); } .daily-cell .daily-ic { font-size: 1.1rem; } .daily-cell .daily-amt { font-weight: 800; color: var(--amber); } .daily-cell.claimed { opacity: 0.5; filter: grayscale(0.4); } .daily-cell.today { border-color: var(--green); background: rgba(52,210,123,0.18); box-shadow: 0 0 0 2px rgba(52,210,123,0.4) inset; } .daily-reward { font-weight: 800; margin: 4px 0 10px; } #btn-daily-claim.disabled { opacity: 0.55; filter: grayscale(0.4); } /* --- Indicadores "listo" en botones de menú -------------------------------- */ .btn.ready { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset, 0 0 16px rgba(242,193,78,0.4); animation: readyGlow 1.8s ease-in-out infinite; } @keyframes readyGlow { 0%,100% { box-shadow: 0 0 0 1px var(--amber) inset, 0 0 10px rgba(242,193,78,0.3); } 50% { box-shadow: 0 0 0 1px var(--amber) inset, 0 0 20px rgba(242,193,78,0.55); } } /* --- Línea de extras en victoria ------------------------------------------- */ .win-extra { font-weight: 800; color: var(--amber); font-size: 0.9rem; margin: 2px 0 8px; line-height: 1.4; } /* ===================== Modal de victoria PREMIUM (compacto, landscape-safe) ===================== */ .win-panel { width: min(440px, 92vw); max-height: min(88dvh, 640px); /* nunca más alto que el viewport; scroll solo en emergencia */ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 22px 18px; text-align: center; background: radial-gradient(120% 70% at 50% -6%, rgba(242,193,78,0.12), transparent 60%), linear-gradient(180deg, rgba(18,46,30,0.92), rgba(8,22,14,0.95)); border: 1px solid rgba(242,193,78,0.5); box-shadow: var(--shadow-lg), 0 0 36px rgba(242,193,78,0.18), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); } /* Trofeo dorado arriba */ .win-trophy { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; background: radial-gradient(circle at 38% 30%, #ffe79a, #f2c14e 55%, #b5791f); border: 3px solid rgba(255,255,255,0.5); box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 26px rgba(242,193,78,0.5); animation: ballBob 2.6s ease-in-out infinite; } .win-trophy-ic { font-size: 38px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); } /* Visor 3D de Oliver en la victoria (EN PRUEBA): compacto, sustituye al trofeo cuando el modelo carga; si falla, el trofeo 🏆 sigue visible (sin 'oliver-on'). */ .oliver-win { width: 122px; height: 132px; margin: 0 auto 2px; display: none; } .oliver-win canvas { display: block; width: 100%; height: 100%; } .win-panel.oliver-on .oliver-win { display: block; } .win-panel.oliver-on .win-trophy { display: none; } /* Título corto y fuerte */ .win-title { margin: 0; font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 900; letter-spacing: 0.4px; line-height: 1.02; color: var(--amber); text-shadow: 0 2px 0 var(--amber-deep), 0 6px 16px rgba(0,0,0,0.5); } /* Estrellas grandes: ganadas doradas con glow, no ganadas apagadas pero elegantes */ .win-stars { margin: 0; font-size: 2.5rem; letter-spacing: 6px; line-height: 1; } .win-stars .won { color: var(--amber); text-shadow: 0 2px 12px rgba(242,193,78,0.6); } .win-stars .dim { color: rgba(246,241,227,0.26); } /* Filas de stats compactas (icono · etiqueta · valor) */ .win-stats { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; } .win-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); } .ws-ic { font-size: 1rem; } .ws-lbl { text-align: left; font-size: 0.86rem; color: var(--bone); font-weight: 700; } .ws-val { font-size: 1.02rem; font-weight: 900; color: var(--amber); } /* Bonus: UNA línea breve */ .win-bonus { margin: 2px 0 0; font-size: 0.82rem; font-weight: 800; color: var(--amber); line-height: 1.3; } /* Acciones: CTA principal a lo ancho + fila secundaria */ .win-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .win-cta { width: 100%; font-size: 1.15rem; font-weight: 900; padding: 14px 18px; border-radius: 15px; box-shadow: 0 6px 0 #136e3a, var(--shadow), 0 0 18px rgba(52,210,123,0.3); } .win-cta:active { box-shadow: 0 2px 0 #136e3a, var(--shadow); transform: translateY(3px) scale(0.99); } .win-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .win-sec { width: 100%; min-width: 0; } /* Landscape compacto: el modal completo cabe; botones SIEMPRE visibles */ @media (orientation: landscape) and (max-height: 520px) { .win-panel { width: min(560px, 92vw); max-height: 94dvh; padding: 12px 18px; gap: 6px; } .win-trophy { width: 46px; height: 46px; border-width: 2px; margin-top: 0; } .win-trophy-ic { font-size: 25px; } .win-title { font-size: clamp(1.2rem, 5vh, 1.7rem); } .win-stars { font-size: 1.7rem; letter-spacing: 4px; } .win-stats { gap: 4px; margin: 2px 0; } .win-stat { padding: 5px 12px; } .ws-lbl, .ws-val { font-size: 0.8rem; } .win-bonus { font-size: 0.74rem; } .win-cta { font-size: 1rem; padding: 9px 14px; } .win-actions { gap: 6px; margin-top: 3px; } .win-panel .sparkles { display: none; } } /* Landscape MUY bajo: stats en 2 columnas para ganar alto */ @media (orientation: landscape) and (max-height: 430px) { .win-stats { display: grid; grid-template-columns: 1fr 1fr; } .win-stat { padding: 5px 10px; } } /* Móvil estrecho */ @media (max-width: 380px) { .win-panel { width: 94vw; padding: 16px 14px 14px; } .win-stat { padding: 7px 11px; } } /* ===================== Game Over PREMIUM (mismo lenguaje visual que la victoria, con acento rojo/naranja suave; compacto y landscape-safe) ===================== */ .over-panel { width: min(420px, 92vw); max-height: min(88dvh, 620px); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 22px 16px; text-align: center; background: radial-gradient(120% 70% at 50% -6%, rgba(240,88,74,0.16), transparent 60%), linear-gradient(180deg, rgba(18,46,30,0.92), rgba(8,22,14,0.95)); border: 1px solid rgba(242,193,78,0.45); box-shadow: var(--shadow-lg), 0 0 32px rgba(240,88,74,0.16), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(12px) saturate(1.06); -webkit-backdrop-filter: blur(12px) saturate(1.06); } /* Insignia redonda con el mono prehistórico (carácter, integrado sin romper el diseño) */ .over-badge { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; background: radial-gradient(circle at 40% 32%, rgba(242,193,78,0.22), rgba(240,88,74,0.16) 60%, rgba(8,22,14,0.25)); border: 3px solid rgba(242,193,78,0.42); box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 2px 8px rgba(0,0,0,0.28); animation: ballBob 3s ease-in-out infinite; } .over-monkey { width: 80px; height: 80px; display: grid; place-items: center; } .over-monkey-art { width: 80px; height: 80px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.38)); } .over-title { margin: 0; font-size: clamp(1.4rem, 5.5vw, 1.9rem); font-weight: 900; letter-spacing: 0.3px; line-height: 1.05; color: var(--amber); text-shadow: 0 2px 0 var(--amber-deep), 0 6px 16px rgba(0,0,0,0.5); } .over-sub { margin: -3px 0 1px; font-size: 0.95rem; font-weight: 700; color: var(--bone); opacity: 0.92; } .over-record { margin: 0; font-weight: 800; font-size: 0.82rem; color: var(--green); } .over-stats { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; } .over-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); } .os-ic { font-size: 1rem; } .os-lbl { text-align: left; font-size: 0.86rem; color: var(--bone); font-weight: 700; } .os-val { font-size: 1.02rem; font-weight: 900; color: var(--amber); } .over-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } /* (id en el selector para ganar a la regla genérica "#screen-gameover .btn") */ #screen-gameover .over-cta { width: 100%; margin: 0; font-size: 1.15rem; font-weight: 900; padding: 14px 18px; border-radius: 15px; box-shadow: 0 6px 0 var(--green-ink), var(--shadow), 0 0 18px rgba(52,210,123,0.3); } #screen-gameover .over-cta:active { box-shadow: 0 2px 0 var(--green-ink), var(--shadow); transform: translateY(3px) scale(0.99); } .over-actions-row { display: flex; gap: 8px; } #screen-gameover .over-actions-row .btn { flex: 1; margin: 0; min-width: 0; } .over-sim[hidden] { display: none !important; } /* Landscape compacto: el panel entero cabe; botones SIEMPRE visibles */ @media (orientation: landscape) and (max-height: 520px) { .over-panel { width: min(540px, 92vw); max-height: 94dvh; padding: 10px 18px; gap: 6px; } .over-badge { width: 58px; height: 58px; border-width: 2px; margin-top: 0; } .over-monkey, .over-monkey-art { width: 46px; height: 46px; } .over-title { font-size: clamp(1.1rem, 4.5vh, 1.5rem); } .over-sub { font-size: 0.8rem; margin: 0; } .over-stats { gap: 4px; margin: 2px 0; } .over-stat { padding: 5px 12px; } .os-lbl, .os-val { font-size: 0.8rem; } #screen-gameover .over-cta { font-size: 1rem; padding: 9px 14px; } .over-actions { gap: 6px; margin-top: 3px; } } /* Landscape MUY bajo: stats en 3 columnas para ganar alto */ @media (orientation: landscape) and (max-height: 430px) { .over-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; } .over-stat { grid-template-columns: auto auto; justify-content: center; gap: 6px; padding: 5px 8px; } .os-lbl { display: none; } } /* Móvil estrecho */ @media (max-width: 380px) { .over-panel { width: 94vw; padding: 16px 14px 14px; } }