* { box-sizing: border-box; margin: 0; padding: 0; } /* Algunos navegadores no heredan box-sizing:border-box del `*` de arriba en elementos de formulario (button/input/select quedan en content-box por defecto) — sin esto, un botón con `width:100%` + padding propio se sale de su contenedor porque el padding se suma por fuera del 100%. */ button, input, select, textarea { box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0d17; color: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #0b0d17; } .screen.active { display: flex; } /* Permite hacer scroll si el contenido (instrucciones, avisos) no cabe en pantallas chicas, sin afectar las demás pantallas (la de caza AR nunca debe scrollear). */ .screen-scroll { overflow-y: auto; padding-top: 48px; padding-bottom: 48px; } /* El motor 8th Wall mueve el canvas de la cámara para que sea el último hijo de (fuera de #screen-hunt) y le da position:auto sin z-index. Como nuestro propio #camerafeed también queda "positioned" (ver más abajo), sin esto el canvas puede terminar pintándose encima de toda nuestra interfaz. Un z-index explícito garantiza que las pantallas siempre queden arriba, sea cual sea el orden final en el DOM. */ .screen { z-index: 1000; } .panel { max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; } h1 { font-size: 28px; } p { line-height: 1.5; color: #cfcfe0; } .hint { font-size: 14px; color: #9a9ab0; } .hint.small { position: absolute; bottom: 24px; font-size: 13px; } .btn-primary { background: linear-gradient(135deg, #7c3aed, #db2777); color: white; border: none; padding: 16px 32px; font-size: 18px; font-weight: 600; border-radius: 999px; cursor: pointer; } .btn-primary:active { transform: scale(0.97); } .error { color: #ff6b6b; font-size: 14px; } .hidden { display: none !important; } .inapp-warning { background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.5); border-radius: 12px; padding: 14px 16px; text-align: left; } .inapp-warning p { color: #ffdf8a; font-size: 14px; margin: 0; } .inapp-warning p + p { margin-top: 8px; } .inapp-warning strong { color: #fff; } /* Pantalla de inicio */ .ambient-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .ambient-glow::before, .ambient-glow::after { content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: 0.28; animation: glow-drift 16s ease-in-out infinite; } .ambient-glow::before { background: #7c3aed; top: -20vmax; left: -15vmax; } .ambient-glow::after { background: #db2777; bottom: -22vmax; right: -15vmax; animation-delay: -8s; } @keyframes glow-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.15); } } .onboarding-panel { max-width: 440px; } .onboarding-emoji { font-size: 46px; line-height: 1; } .onboarding-title { font-size: 30px; font-weight: 800; background: linear-gradient(135deg, #fff, #cfb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .onboarding-subtitle { font-size: 14px; color: #a89ad6; text-transform: uppercase; letter-spacing: 1.5px; margin-top: -12px; } .steps-list { width: 100%; display: flex; flex-direction: column; gap: 10px; margin: 4px 0; } .step { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; text-align: left; } .step-icon { font-size: 22px; flex-shrink: 0; width: 36px; text-align: center; } .step-text { font-size: 14px; color: #d8d8ea; line-height: 1.4; } .step-text strong { color: #fff; } .btn-start-big { width: 100%; padding: 18px 32px; font-size: 19px; box-shadow: 0 8px 24px rgba(219,39,119,0.35); } /* HUD */ .hud-top { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hud-card { display: flex; align-items: center; gap: 12px; background: rgba(11,13,23,0.82); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 10px 14px; max-width: 260px; cursor: pointer; pointer-events: auto; transition: transform 0.1s ease, background 0.15s ease; } .hud-card:active { transform: scale(0.96); background: rgba(11,13,23,0.8); } /* Salto de celebración cuando una pieza recién capturada "entra" al contador — el color también cambia a un verde de "éxito" durante el salto, para que se note incluso si el jugador no está mirando fijo el HUD. */ @keyframes hud-bounce { 0% { transform: scale(1); background: rgba(11,13,23,0.82); border-color: rgba(255,255,255,0.1); box-shadow: none; } 30% { transform: scale(1.28); background: rgba(46,204,113,0.35); border-color: rgba(46,204,113,0.9); box-shadow: 0 0 22px rgba(46,204,113,0.55); } 55% { transform: scale(0.9); background: rgba(46,204,113,0.35); border-color: rgba(46,204,113,0.9); box-shadow: 0 0 22px rgba(46,204,113,0.55); } 100% { transform: scale(1); background: rgba(11,13,23,0.82); border-color: rgba(255,255,255,0.1); box-shadow: none; } } .hud-card.bounce { animation: hud-bounce 0.55s ease; } /* Partícula 2D que "vuela" desde la pieza capturada hasta el contador */ .fly-particle { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 5000; will-change: transform, opacity; } .hud-icon { font-size: 22px; flex-shrink: 0; } .hud-progress-info { flex: 1; min-width: 0; } .progress-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #e8e8f5; } .progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.12); border-radius: 999px; overflow: hidden; } /* Diagnóstico temporal mientras probamos el reconocimiento de marcadores en dispositivos reales. Quitar (o dejar) una vez confirmado que funciona. */ .debug-status { margin-top: 10px; font-size: 12px; font-family: monospace; color: #7fffa0; background: rgba(0,0,0,0.6); padding: 6px 10px; border-radius: 8px; max-height: 90px; overflow-y: auto; white-space: pre-wrap; text-align: left; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7c3aed, #db2777); transition: width 0.3s ease; } /* CAZA AR (marcadores de imagen) */ /* Fondo transparente a propósito: el motor 8th Wall dibuja la cámara en un canvas que pasa a ser hijo directo de (no de esta pantalla), así que necesitamos que se vea "a través" de aquí. Ver nota de z-index más arriba en .screen. */ #screen-hunt.active { padding: 0; display: block; background: transparent; } #camerafeed { position: absolute; inset: 0; width: 100%; height: 100%; } @keyframes pulse-distance { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .capture-prompt { position: absolute; bottom: 110px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .capture-prompt.hidden { display: none; } .capture-piece-name { background: rgba(0,0,0,0.6); color: #fff; font-weight: 700; font-size: 17px; padding: 8px 20px; border-radius: 999px; } .btn-capture { box-shadow: 0 0 0 6px rgba(219,39,119,0.25); animation: pulse-distance 1s ease-in-out infinite; } .ar-overlay { position: absolute; bottom: 100px; /* que no se superponga con el botón "Pistas" (bottom-right) */ left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; } /* Alerta de captura exitosa */ .capture-toast { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #2ecc71, #16a085); color: #fff; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; box-shadow: 0 10px 28px rgba(46,204,113,0.45); animation: toast-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes toast-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .btn-secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.25); padding: 10px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; } /* Pistas (acertijos) */ .btn-riddles-open { position: absolute; bottom: 24px; right: 20px; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; border: none; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(124,58,237,0.45); } .btn-riddles-open:active { transform: scale(0.96); } .btn-riddles-icon { font-size: 17px; } .riddles-panel { position: absolute; inset: 0; z-index: 1; /* crea su propio contexto de apilamiento para el .ambient-glow interno */ background: rgba(11,13,23,0.94); padding: 24px 16px; display: flex; flex-direction: column; gap: 14px; } .riddles-header { display: flex; align-items: center; justify-content: space-between; } .riddles-header h2 { font-size: 20px; font-weight: 800; background: linear-gradient(135deg, #fff, #cfb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .btn-close { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.25); width: 34px; height: 34px; border-radius: 50%; font-size: 14px; cursor: pointer; } .riddles-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } .riddle-item { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; text-align: left; } .riddle-item-icon { font-size: 24px; flex-shrink: 0; width: 34px; text-align: center; } .riddle-item-body { min-width: 0; } .riddle-item-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: #fff; } .riddle-item-text { font-size: 14px; color: #cfcfe0; } .riddle-item-status { font-size: 13px; font-weight: 700; color: #2ecc71; } .riddle-item.captured { border-color: rgba(46,204,113,0.4); } /* Desafío de captura */ .challenge-modal { position: absolute; inset: 0; z-index: 1; /* crea su propio contexto de apilamiento para el .ambient-glow interno */ background: rgba(11,13,23,0.92); display: flex; align-items: center; justify-content: center; padding: 24px; } .challenge-panel { max-width: 420px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 28px 22px; } .challenge-title { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.4; } /* .challenge-panel usa align-items:center, así que sus hijos directos NO se estiran al ancho completo por defecto — sin esto, cualquier `width:100%` dentro de #challenge-content (botones, grillas) se calcula contra un ancho indefinido y puede desbordarse del panel. */ #challenge-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; } .trivia-options { display: flex; flex-direction: column; gap: 10px; width: 100%; } .trivia-option { width: 100%; padding: 13px 16px; font-size: 15px; transition: background 0.15s ease, transform 0.1s ease; } .trivia-option:active { transform: scale(0.97); background: rgba(255,255,255,0.18); } /* Memoria (secuencia de colores) */ .memory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; } .memory-tile { aspect-ratio: 1; border-radius: 16px; border: 2px solid rgba(255,255,255,0.15); opacity: 0.55; transition: opacity 0.12s ease, transform 0.12s ease; cursor: pointer; } .memory-tile:disabled { cursor: default; } .memory-tile.active { opacity: 1; transform: scale(1.05); box-shadow: 0 0 24px 4px rgba(255,255,255,0.5); } /* Toques rápidos */ .tap-counter { font-size: 28px; font-weight: 800; color: #fff; } .tap-button { width: 100%; font-size: 20px; user-select: none; } .tap-timer-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.12); border-radius: 999px; overflow: hidden; } .tap-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #db2777, #7c3aed); } /* Reflejo */ .reflex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; } .reflex-slot { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); transition: background 0.1s ease, box-shadow 0.1s ease; cursor: pointer; } .reflex-slot.lit { background: #2ecc71; box-shadow: 0 0 20px 6px rgba(46,204,113,0.7); } .challenge-feedback { font-size: 16px; font-weight: 700; } .challenge-feedback.success { color: #2ecc71; } .challenge-feedback.fail { color: #ff6b6b; } /* WIN */ #win-canvas { position: absolute; inset: 0; width: 100%; height: 60%; } .win-panel { position: relative; margin-top: auto; margin-bottom: 40px; } .win-emoji { font-size: 48px; line-height: 1; } .redemption-box { background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.3); border-radius: 18px; padding: 18px 24px; } .redemption-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #a89ad6; margin-bottom: 8px; } .redemption-code { font-size: 40px; font-weight: 800; letter-spacing: 4px; color: #fff; }