/* ========================================================================= VARIABLES GLOBALES --color-principal es EL color de acento de todo el juego. Se define acá con un valor por defecto, pero JS lo sobreescribe en tiempo real (document.documentElement.style.setProperty) cuando el jugador elige un color en el panel de Personalizar. Como todo el CSS de abajo usa var(--color-principal) en vez de un color fijo, el cambio se aplica a TODA la interfaz de una sola vez (botón, bordes, textos, glows, etc). ========================================================================= */ :root { --color-principal: #b026ff; /* Tema oscuro (por defecto) */ --bg-color: #0d0d0d; --bg-gradient-inner: #1a1420; --bg-panel: #161616; --bg-card: #1c1c1f; --border-color: #2a2a2e; --text-main: #f0f0f5; --text-dim: #9a9aa5; --font-title: 'Orbitron', sans-serif; --font-body: 'Rajdhani', sans-serif; /* Glow reutilizable, siempre basado en el color principal actual */ --glow: 0 0 8px var(--color-principal), 0 0 20px color-mix(in srgb, var(--color-principal) 40%, transparent); } /* Tema claro: se activa poniendo data-theme="light" en desde JS. Solo cambiamos los colores de fondo/texto; --color-principal se mantiene igual para que el acento elegido por el jugador siga siendo consistente. */ html[data-theme="light"] { --bg-color: #eef0f4; --bg-gradient-inner: #ffffff; --bg-panel: #ffffff; --bg-card: #f5f6fa; --border-color: #d8dae0; --text-main: #17181c; --text-dim: #5a5d68; } /* Reset básico: quitamos márgenes/paddings por defecto del navegador */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { /* "manipulation" le dice al navegador que permita scroll normal pero DESACTIVE el gesto de "doble tap para hacer zoom" en toda la página (parte del fix de zoom en móvil, ver también el del HTML). */ touch-action: manipulation; } body { background: radial-gradient(circle at 50% 0%, var(--bg-gradient-inner) 0%, var(--bg-color) 60%); color: var(--text-main); font-family: var(--font-body); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; /* Quita el "flash" gris que Chrome/Safari muestran al tocar un elemento en móvil */ -webkit-tap-highlight-color: transparent; } h1, h2, h3 { font-family: var(--font-title); } /* ========================================================================= HEADER ========================================================================= */ .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 24px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); } .logo { font-size: 1.4rem; letter-spacing: 2px; color: var(--text-main); } .logo span { color: var(--color-principal); text-shadow: var(--glow); } .quick-stats { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .stat-box { display: flex; flex-direction: column; align-items: center; min-width: 90px; } .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .stat-value { font-family: var(--font-title); font-size: 1.3rem; color: var(--color-principal); text-shadow: var(--glow); transition: transform 0.15s ease; } /* Pequeño "pulso" cuando un contador cambia (activado desde JS agregando esta clase). Es genérica para poder reutilizarla en cualquier elemento con "transition: transform". */ .bump { transform: scale(1.18); } .topbar-actions { display: flex; gap: 10px; } .icon-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); font-size: 1.2rem; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; transition: 0.2s; } .icon-btn:hover { border-color: var(--color-principal); box-shadow: var(--glow); } /* ========================================================================= ZONA DE CLICK ========================================================================= */ .click-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; } .click-wrapper { position: relative; } /* El botón principal. El color viene directo de --color-principal (global), así que cambiarlo en Personalizar también cambia el botón automáticamente. */ .click-button { width: 220px; height: 220px; border: 3px solid var(--color-principal); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-principal) 35%, #000), #0a0a0a); color: var(--text-main); cursor: pointer; user-select: none; /* Refuerza, sobre el elemento más "tapeado" del juego, que no dispare zoom */ touch-action: manipulation; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px; text-align: center; box-shadow: 0 0 20px color-mix(in srgb, var(--color-principal) 60%, transparent), 0 0 50px color-mix(in srgb, var(--color-principal) 30%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-principal) 40%, transparent); transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.3s ease, background 0.3s ease; } /* El tema claro solo cambia el fondo de los estilos "por defecto" (los que usan el radial-gradient normal). "ghost", "gradient" y "emoji" definen su propio fondo más abajo y no deben ser pisados por esta regla. */ html[data-theme="light"] .click-button:not(.btn-style-ghost):not(.btn-style-gradient):not(.btn-style-emoji) { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-principal) 20%, #fff), #ffffff); color: var(--text-main); } .click-button:hover { box-shadow: 0 0 30px color-mix(in srgb, var(--color-principal) 80%, transparent), 0 0 70px color-mix(in srgb, var(--color-principal) 50%, transparent), inset 0 0 30px color-mix(in srgb, var(--color-principal) 55%, transparent); } /* Efecto de "aplastado" al hacer click, se activa con la clase .pressed desde JS */ .click-button:active, .click-button.pressed { transform: scale(0.92); } /* Ícono opcional (emoji elegido en Personalizar). Si está vacío no ocupa espacio. */ .click-icon { font-size: 2.6rem; line-height: 1; } .click-icon:empty { display: none; } /* Texto principal del botón: muestra el mensaje inicial y luego el puntaje en vivo */ .click-label { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 1.15; font-size: clamp(0.85rem, 3vw, 1.25rem); transition: transform 0.15s ease; } /* ========================================================================= ESTILOS DEL BOTÓN (elegibles en Personalizar) Cada uno es una clase "btn-style-X" que se agrega/saca desde script.js. Todas siguen usando var(--color-principal), así que respetan el color elegido por el jugador y se adaptan solas al modo claro/oscuro. ========================================================================= */ /* --- Formas básicas --- */ .btn-style-circle { border-radius: 50%; } .btn-style-rounded { border-radius: 32px; } .btn-style-square { border-radius: 4px; } /* --- Hexágono: una forma geométrica extra usando clip-path --- */ .btn-style-hexagon { border-radius: 12px; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%); } /* --- Variantes de borde --- */ .btn-style-dotted { border-radius: 50%; border-style: dotted; border-width: 5px; } .btn-style-double { border-radius: 50%; border-style: double; border-width: 10px; } /* --- Neón pulsante: el glow crece y decrece en loop --- */ .btn-style-neon-pulse { border-radius: 50%; animation: neonPulse 1.6s ease-in-out infinite; } @keyframes neonPulse { 0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--color-principal) 60%, transparent), 0 0 50px color-mix(in srgb, var(--color-principal) 30%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-principal) 40%, transparent); } 50% { box-shadow: 0 0 40px color-mix(in srgb, var(--color-principal) 90%, transparent), 0 0 85px color-mix(in srgb, var(--color-principal) 55%, transparent), inset 0 0 35px color-mix(in srgb, var(--color-principal) 60%, transparent); } } /* --- Gradiente animado: los colores se mueven en loop dentro del botón --- */ .btn-style-gradient { border-radius: 50%; background: linear-gradient(135deg, var(--color-principal), color-mix(in srgb, var(--color-principal) 45%, #00e5ff), color-mix(in srgb, var(--color-principal) 45%, #ff2d78), var(--color-principal)); background-size: 300% 300%; animation: gradientShift 6s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- Minimalista ("ghost"): sin fondo ni glow, solo un borde fino y texto de color --- */ .btn-style-ghost { border-radius: 50%; background: transparent; border-width: 1px; border-color: color-mix(in srgb, var(--color-principal) 50%, transparent); box-shadow: none; } .btn-style-ghost .click-label, .btn-style-ghost .click-icon { color: var(--color-principal); } .btn-style-ghost:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--color-principal) 35%, transparent); } /* --- Emoji gigante: el botón se vuelve un solo emoji, sin fondo ni borde --- */ .btn-style-emoji { background: transparent; border: none; box-shadow: none; } .btn-style-emoji:hover { box-shadow: none; } .btn-style-emoji .click-label { display: none; } .btn-style-emoji .click-icon { font-size: 5.5rem; } /* Contenedor de los números flotantes "+1", "+5", etc. */ .floating-container { position: absolute; inset: 0; pointer-events: none; /* para que no bloqueen los clicks al botón */ } .floating-number { position: absolute; font-family: var(--font-title); font-weight: 700; color: var(--color-principal); text-shadow: var(--glow); animation: floatUp 0.9s ease-out forwards; white-space: nowrap; } .floating-number.crit { color: #ffcc00; text-shadow: 0 0 10px #ffcc00, 0 0 25px #ff8800; font-size: 1.4em; } @keyframes floatUp { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1.3); } } /* ========================================================================= BANNER DE PRESTIGIO ========================================================================= */ .prestige-banner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 0 20px 20px; padding: 14px 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-principal) 15%, transparent), color-mix(in srgb, var(--color-principal) 5%, transparent)); border: 1px solid var(--color-principal); border-radius: 12px; text-align: center; } .hidden { display: none !important; } .btn-neon { background: var(--color-principal); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-family: var(--font-title); font-weight: 700; cursor: pointer; box-shadow: var(--glow); transition: 0.2s; } .btn-neon:hover { transform: translateY(-2px); } .btn-neon:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ========================================================================= TABS (pestañas) ========================================================================= */ .tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 20px; } .tab-btn { background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border-color); padding: 10px 18px; border-radius: 10px 10px 0 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; transition: 0.2s; } .tab-btn:hover { color: var(--text-main); } .tab-btn.active { color: var(--color-principal); border-color: var(--color-principal); box-shadow: 0 -2px 12px color-mix(in srgb, var(--color-principal) 30%, transparent); } .tab-content { flex: 1; max-width: 1000px; width: 100%; margin: 0 auto; padding: 24px 20px 60px; } .tab-pane { display: none; animation: fadeIn 0.25s ease; } .tab-pane.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================= MEJORAS (upgrades) ========================================================================= */ .upgrades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-content: start; } .upgrade-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; transition: 0.2s; } .upgrade-card.affordable { border-color: var(--color-principal); box-shadow: 0 0 14px color-mix(in srgb, var(--color-principal) 25%, transparent); } .upgrade-card.locked { opacity: 0.45; filter: grayscale(0.6); } .upgrade-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; gap: 8px; } .upgrade-icon { font-size: 1.4rem; margin-right: 6px; } .upgrade-desc { font-size: 0.85rem; color: var(--text-dim); } .upgrade-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; } .upgrade-cost { font-family: var(--font-title); color: var(--color-principal); } .upgrade-owned { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; } .buy-btn { background: var(--color-principal); color: #fff; border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 700; transition: 0.15s; flex-shrink: 0; } .buy-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow); } .buy-btn:disabled { background: #555; color: #999; cursor: not-allowed; } /* ========================================================================= LOGROS (achievements) ========================================================================= */ .achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-content: start; } .achievement-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 10px; opacity: 0.4; filter: grayscale(1); transition: 0.3s; } .achievement-card.unlocked { opacity: 1; filter: none; border-color: var(--color-principal); box-shadow: 0 0 12px color-mix(in srgb, var(--color-principal) 25%, transparent); } .achievement-icon { font-size: 1.6rem; } .achievement-name { font-weight: 700; } .achievement-desc { font-size: 0.8rem; color: var(--text-dim); } /* ========================================================================= ESTADÍSTICAS ========================================================================= */ .stats-panel { max-width: 480px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .stat-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-color); font-size: 0.95rem; } .stat-row span:last-child { color: var(--color-principal); font-weight: 700; text-align: right; } .btn-danger { margin-top: 14px; background: transparent; border: 1px solid #ff3b3b; color: #ff6b6b; padding: 10px; border-radius: 8px; cursor: pointer; transition: 0.2s; } .btn-danger:hover { background: rgba(255,59,59,0.15); } /* ========================================================================= PERSONALIZACIÓN ========================================================================= */ .customize-panel { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .customize-group { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .customize-group label { font-weight: 700; color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; } #colorPicker { width: 60px; height: 36px; border: none; background: none; cursor: pointer; } .preset-colors, .preset-icons { display: flex; gap: 10px; flex-wrap: wrap; } .color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--c); cursor: pointer; transition: 0.15s; } .color-swatch:hover { transform: scale(1.15); } .icon-swatch { background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; transition: 0.15s; } .icon-swatch:hover { border-color: var(--color-principal); } .icon-swatch.active { border-color: var(--color-principal); color: var(--color-principal); box-shadow: var(--glow); } /* --- Selector de estilo del botón (con mini vista previa por opción) --- */ .style-options { display: flex; flex-wrap: wrap; gap: 10px; } .style-option { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; cursor: pointer; transition: 0.15s; } .style-option:hover { border-color: var(--color-principal); } .style-option.active { border-color: var(--color-principal); box-shadow: var(--glow); } .style-option-label { font-size: 0.65rem; color: var(--text-dim); text-align: center; max-width: 64px; } /* La mini vista previa reutiliza las mismas clases que el botón real (.click-button.btn-style-X), solo que a tamaño chico y sin interacción. */ .click-button.style-preview { width: 44px; height: 44px; padding: 0; border-width: 2px; font-size: 1.1rem; pointer-events: none; } #iconInput { width: 70px; font-size: 1.3rem; text-align: center; background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 8px; padding: 6px; } /* ========================================================================= FOOTER ========================================================================= */ .footer { text-align: center; padding: 14px; color: var(--text-dim); font-size: 0.8rem; border-top: 1px solid var(--border-color); } /* ========================================================================= SCROLLBAR (opcional, prolijidad visual en los paneles scrolleables) ========================================================================= */ .upgrades-grid::-webkit-scrollbar, .achievements-grid::-webkit-scrollbar { width: 8px; } .upgrades-grid::-webkit-scrollbar-thumb, .achievements-grid::-webkit-scrollbar-thumb { background: var(--color-principal); border-radius: 8px; } /* ========================================================================= RESPONSIVE: ajustes para pantallas de celular ========================================================================= */ @media (max-width: 700px) { .topbar { flex-direction: column; text-align: center; } .quick-stats { justify-content: center; gap: 14px; } .stat-box { min-width: 70px; } .stat-value { font-size: 1.05rem; } .click-button { width: 190px; height: 190px; } .click-icon { font-size: 2rem; } .tabs { gap: 6px; } .tab-btn { flex: 1 1 40%; text-align: center; padding: 10px 8px; font-size: 0.85rem; } .tab-content { padding: 18px 12px 50px; } /* Los paneles de mejoras y logros se vuelven una sola columna scrolleable, para que la pantalla no se estire infinito con las 15 mejoras. */ .upgrades-grid, .achievements-grid { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; padding-right: 6px; } .prestige-banner { margin: 0 12px 16px; padding: 12px; font-size: 0.9rem; } .stats-panel, .customize-panel { max-width: 100%; } } /* Pantallas muy chicas (celulares angostos) */ @media (max-width: 380px) { .logo { font-size: 1.15rem; } .click-button { width: 160px; height: 160px; padding: 14px; } .click-label { font-size: 0.78rem; } .tab-btn { flex: 1 1 100%; } .upgrade-head { flex-direction: column; align-items: flex-start; gap: 2px; } .upgrade-footer { flex-direction: column; align-items: stretch; } .buy-btn { width: 100%; } }