/* ============================================================================ LAN PARTY Z — UI KIT · v2.0 Estilo "anime pop / cel" · paleta de marca MECABOTWARE. Uso: Prefijo de clases: .lpz-* · Fuentes vía @import. TEMA POR DEFECTO: OSCURO. Fuerza claro con data-theme="light". ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap'); /* ---------------------------------------------------------------------------- 1. TOKENS (valores por defecto = TEMA OSCURO, marca Mecabotware) ---------------------------------------------------------------------------- */ :root{ /* Marca Mecabotware */ --lpz-accent: #23C7F2; /* cyan eléctrico (primario) */ --lpz-accent-2: #7A4DE8; /* índigo / púrpura (cielo nocturno) */ --lpz-gold: #FFC24B; /* dorado (puntos / destacados) */ --lpz-danger: #E23B4E; /* rojo (acciones destructivas) */ --lpz-ink: #060c1c; /* contorno / tinta */ --lpz-line: var(--lpz-ink); /* Superficies — OSCURO por defecto */ --lpz-bg: #0a0f20; --lpz-surface: #141d38; --lpz-surface-2:#0f1730; --lpz-text: #ffffff; --lpz-muted: #9db0d6; /* Cielo nocturno (hero / fondos) */ --lpz-sky-top: #2a2170; --lpz-sky-mid: #5a3fb0; --lpz-sky-low: #1a2a66; /* Tipografía */ --lpz-font-display: 'Mochiy Pop One', system-ui, sans-serif; --lpz-font-body: 'Zen Kaku Gothic New', system-ui, sans-serif; /* Radios / contorno / relieve */ --lpz-r-sm: 12px; --lpz-r-md: 18px; --lpz-r-lg: 26px; --lpz-r-pill: 999px; --lpz-stroke: 3px; --lpz-lift: 5px; --lpz-ring: 0 0 0 var(--lpz-stroke) var(--lpz-line); --lpz-shadow: var(--lpz-ring), 0 var(--lpz-lift) 0 var(--lpz-line); --lpz-soft: 0 12px 30px rgba(0,0,0,.35); --lpz-glow: var(--lpz-ring), 0 0 30px -4px var(--lpz-accent); --lpz-gap: 12px; } /* TEMA CLARO — solo opt-in explícito vía data-theme="light". No debe activarse automáticamente por prefers-color-scheme: el modo incógnito de varios navegadores reporta "light" sin importar el tema del sistema, lo que dejaba el sitio en blanco para esos visitantes aunque el tema por defecto documentado arriba es oscuro. */ [data-theme="light"]{ --lpz-ink: #0a1226; --lpz-line: var(--lpz-ink); --lpz-bg: #eaf1ff; --lpz-surface: #ffffff; --lpz-surface-2:#f2f6ff; --lpz-text: #0a1226; --lpz-muted: #5a6690; --lpz-accent: #12AEDC; --lpz-sky-top: #20307a; --lpz-sky-mid:#5d86e0; --lpz-sky-low:#ffcf9e; } /* ---------------------------------------------------------------------------- 2. BASE (aplica en un contenedor con .lpz-scope o en ) ---------------------------------------------------------------------------- */ .lpz-scope,.lpz-scope *{ box-sizing:border-box; } .lpz-scope{ font-family:var(--lpz-font-body); color:var(--lpz-text); background:var(--lpz-bg); -webkit-font-smoothing:antialiased; } /* ---------------------------------------------------------------------------- 3. TIPOGRAFÍA ---------------------------------------------------------------------------- */ .lpz-display{ font-family:var(--lpz-font-display); color:var(--lpz-text); line-height:.95; margin:0; } .lpz-h1{ font-family:var(--lpz-font-display); font-size:clamp(32px,6vw,72px); line-height:.95; margin:0; } .lpz-h2{ font-family:var(--lpz-font-display); font-size:clamp(26px,4vw,48px); line-height:1; margin:0; } .lpz-h3{ font-family:var(--lpz-font-display); font-size:clamp(20px,3vw,30px); line-height:1.05;margin:0; } .lpz-lead{ font-weight:900; font-size:clamp(16px,2vw,22px); line-height:1.4; margin:0; } .lpz-text{ font-weight:500; line-height:1.6; color:var(--lpz-muted); margin:0; } /* Contorno "cel" para títulos */ .lpz-outline{ color:#fff; -webkit-text-stroke:6px var(--lpz-line); paint-order:stroke fill; filter:drop-shadow(4px 5px 0 var(--lpz-accent)); } .lpz-outline.is-gold{ color:var(--lpz-gold); filter:drop-shadow(4px 5px 0 var(--lpz-accent-2)); } .lpz-outline.is-thick{ -webkit-text-stroke-width:9px; } /* Enlace con marca */ .lpz-link{ color:var(--lpz-accent); font-weight:900; text-decoration:none; box-shadow:inset 0 -3px 0 var(--lpz-accent); } .lpz-link:hover{ filter:brightness(1.15); } /* ---------------------------------------------------------------------------- 4. BOTONES ---------------------------------------------------------------------------- */ .lpz-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--lpz-font-display); font-size:16px; line-height:1; color:var(--lpz-ink); background:var(--lpz-accent); padding:13px 22px; border:0; border-radius:var(--lpz-r-pill); box-shadow:var(--lpz-shadow); cursor:pointer; text-decoration:none; letter-spacing:.5px; transition:transform .12s, box-shadow .12s, filter .12s; -webkit-tap-highlight-color:transparent; } .lpz-btn:hover{ transform:translateY(-2px); box-shadow:var(--lpz-ring), 0 calc(var(--lpz-lift) + 2px) 0 var(--lpz-line); filter:saturate(1.08); } .lpz-btn:active{ transform:translateY(3px); box-shadow:var(--lpz-ring), 0 2px 0 var(--lpz-line); } .lpz-btn:focus-visible{ outline:3px solid var(--lpz-accent-2); outline-offset:3px; } .lpz-btn--purple{ background:var(--lpz-accent-2); color:#fff; } .lpz-btn--gold{ background:var(--lpz-gold); color:var(--lpz-ink); } .lpz-btn--danger{ background:var(--lpz-danger); color:#fff; } .lpz-btn--ghost{ background:var(--lpz-surface); color:var(--lpz-text); } .lpz-btn--outline{ background:transparent; color:var(--lpz-accent); box-shadow:0 0 0 var(--lpz-stroke) var(--lpz-accent); } .lpz-btn--outline:hover{ background:var(--lpz-accent); color:var(--lpz-ink); } .lpz-btn--outline.is-gold{ color:var(--lpz-gold); box-shadow:0 0 0 var(--lpz-stroke) var(--lpz-gold); } .lpz-btn--outline.is-gold:hover{ background:var(--lpz-gold); color:var(--lpz-ink); } .lpz-btn--sm{ font-size:14px; padding:9px 16px; } .lpz-btn--lg{ font-size:20px; padding:16px 30px; } /* ---------------------------------------------------------------------------- 5. CHIPS / BADGES / TAGS ---------------------------------------------------------------------------- */ .lpz-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--lpz-font-display); font-size:15px; letter-spacing:.5px; color:var(--lpz-ink); background:#fff; padding:7px 16px; border-radius:var(--lpz-r-pill); box-shadow:var(--lpz-ring); } .lpz-chip--accent{ color:var(--lpz-ink); background:var(--lpz-accent); } .lpz-chip--purple{ color:#fff; background:var(--lpz-accent-2); } .lpz-chip--gold{ color:var(--lpz-ink); background:var(--lpz-gold); } .lpz-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--lpz-font-display); font-size:16px; color:var(--lpz-ink); background:var(--lpz-accent); padding:8px 18px; border-radius:var(--lpz-r-pill); box-shadow:var(--lpz-ring), 0 5px 0 var(--lpz-line); } .lpz-tag{ display:inline-flex; align-items:center; gap:5px; font-family:var(--lpz-font-body); font-weight:900; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--lpz-text); padding:4px 10px; border-radius:8px; box-shadow:0 0 0 2px var(--lpz-line); } /* ---------------------------------------------------------------------------- 6. TARJETAS / PANELES / NOTA ---------------------------------------------------------------------------- */ .lpz-card{ background:var(--lpz-surface); color:var(--lpz-text); border-radius:var(--lpz-r-lg); padding:22px; box-shadow:var(--lpz-ring), 0 6px 0 var(--lpz-line), var(--lpz-soft); } .lpz-card--flat{ box-shadow:var(--lpz-ring); } .lpz-card--accent{ background:var(--lpz-accent); color:var(--lpz-ink); } .lpz-card--glow{ box-shadow:var(--lpz-glow), var(--lpz-soft); } .lpz-card__title{ font-family:var(--lpz-font-display); font-size:22px; margin:0 0 8px; } .lpz-panel{ background:var(--lpz-surface-2); border-radius:var(--lpz-r-md); padding:18px; } .lpz-note{ display:flex; gap:12px; align-items:flex-start; background:var(--lpz-surface); border-radius:var(--lpz-r-md); padding:14px 16px; box-shadow:0 0 0 2px var(--lpz-line); border-left:8px solid var(--lpz-accent); } /* Utilidad de brillo cyan (borde glow como en el sitio) */ .lpz-glow{ box-shadow:var(--lpz-glow) !important; } /* ---------------------------------------------------------------------------- 7. FORMULARIOS ---------------------------------------------------------------------------- */ .lpz-label{ font-family:var(--lpz-font-body); font-weight:900; font-size:14px; color:var(--lpz-text); display:block; margin-bottom:6px; } .lpz-input,.lpz-select,.lpz-textarea{ width:100%; font-family:var(--lpz-font-body); font-size:16px; font-weight:700; color:var(--lpz-text); background:var(--lpz-surface-2); padding:12px 16px; border:0; border-radius:var(--lpz-r-md); box-shadow:0 0 0 3px var(--lpz-line); outline:none; transition:box-shadow .12s; } .lpz-input::placeholder,.lpz-textarea::placeholder{ color:var(--lpz-muted); font-weight:500; } .lpz-input:focus,.lpz-select:focus,.lpz-textarea:focus{ box-shadow:0 0 0 3px var(--lpz-accent), 0 0 0 6px color-mix(in srgb, var(--lpz-accent) 25%, transparent); } .lpz-textarea{ min-height:110px; resize:vertical; } /* ---------------------------------------------------------------------------- 8. AVATAR / MEDALLÓN ---------------------------------------------------------------------------- */ .lpz-avatar{ position:relative; display:inline-block; border-radius:50%; background:#fff; padding:8px; box-shadow:0 0 0 5px var(--lpz-line), 0 10px 24px rgba(0,0,0,.3); } .lpz-avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; box-shadow:inset 0 0 0 3px var(--lpz-line); } .lpz-avatar--xs{ width:52px; height:52px; padding:5px; box-shadow:0 0 0 4px var(--lpz-line); } .lpz-avatar--sm{ width:96px; height:96px; } .lpz-avatar--md{ width:160px; height:160px; } .lpz-avatar--lg{ width:240px; height:240px; } /* ---------------------------------------------------------------------------- 9. NAVBAR ---------------------------------------------------------------------------- */ .lpz-nav{ display:flex; align-items:center; gap:16px; padding:12px 18px; background:var(--lpz-surface); border-radius:var(--lpz-r-pill); box-shadow:var(--lpz-ring); } .lpz-nav__brand{ font-family:var(--lpz-font-display); color:var(--lpz-accent); font-size:20px; letter-spacing:2px; text-decoration:none; } .lpz-nav__links{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; } .lpz-nav__link{ font-family:var(--lpz-font-display); font-size:15px; color:var(--lpz-text); text-decoration:none; padding:8px 16px; border-radius:var(--lpz-r-pill); transition:color .12s, background .12s; } .lpz-nav__link:hover{ color:var(--lpz-accent); } .lpz-nav__link.is-active{ background:var(--lpz-accent); color:var(--lpz-ink); box-shadow:var(--lpz-ring); } /* ---------------------------------------------------------------------------- 10. LEADERBOARD (lista de posiciones) ---------------------------------------------------------------------------- */ .lpz-board{ display:flex; flex-direction:column; gap:12px; } .lpz-board__row{ display:flex; align-items:center; gap:16px; background:var(--lpz-surface); padding:12px 16px; border-radius:var(--lpz-r-lg); box-shadow:var(--lpz-ring), 0 5px 0 var(--lpz-line); } .lpz-board__rank{ flex:none; display:grid; place-items:center; width:44px; height:38px; font-family:var(--lpz-font-display); font-size:18px; color:var(--lpz-ink); background:var(--lpz-accent); border-radius:12px; box-shadow:var(--lpz-ring); } .lpz-board__name{ font-family:var(--lpz-font-display); font-size:18px; color:var(--lpz-text); } .lpz-board__name-link{ color:inherit; text-decoration:none; } .lpz-board__pts{ margin-left:auto; font-family:var(--lpz-font-display); font-size:22px; color:var(--lpz-gold); white-space:nowrap; } .lpz-board__actions{ display:flex; gap:8px; flex:none; } @media (max-width: 767.98px){ .lpz-board__row{ flex-wrap: wrap; row-gap: 10px; } .lpz-board__actions{ flex: 1 1 100%; justify-content: flex-end; } /* En móvil el nombre del jugador es el acceso al historial — el botón "Historial" se oculta, y si eso deja las acciones sin nada visible (invitado, sin botón Ajustar), se colapsa toda la fila de acciones para no dejar un espacio vacío. */ .lpz-board__historial-link{ display:none; } .lpz-board__actions:not(:has(button)){ display:none; } } /* Podio: oro / plata / bronce en el rank de los 3 primeros */ .lpz-board__row.is-1{ box-shadow:var(--lpz-glow), 0 5px 0 var(--lpz-line); } .lpz-board__row.is-1 .lpz-board__rank{ background:var(--lpz-gold); } .lpz-board__row.is-2 .lpz-board__rank{ background:#cfd8e6; } .lpz-board__row.is-3 .lpz-board__rank{ background:#e39a5a; } /* ---------------------------------------------------------------------------- 11. TABLA DE DATOS ---------------------------------------------------------------------------- */ .lpz-table-wrap{ overflow-x:auto; border-radius:var(--lpz-r-lg); box-shadow:var(--lpz-ring); background:var(--lpz-surface); } .lpz-table{ width:100%; border-collapse:separate; border-spacing:0; font-family:var(--lpz-font-body); font-weight:700; } .lpz-table thead th{ font-family:var(--lpz-font-display); font-size:15px; color:var(--lpz-accent); text-align:left; padding:14px 16px; border-bottom:3px solid var(--lpz-accent); white-space:nowrap; } .lpz-table td{ padding:13px 16px; color:var(--lpz-text); border-bottom:1px solid color-mix(in srgb, var(--lpz-muted) 22%, transparent); } .lpz-table tbody tr:last-child td{ border-bottom:0; } .lpz-table tbody tr:hover{ background:color-mix(in srgb, var(--lpz-accent) 8%, transparent); } .lpz-table .is-yes{ color:#39d98a; font-weight:900; } .lpz-table .is-no{ color:var(--lpz-danger); font-weight:900; } /* ---------------------------------------------------------------------------- 12. MODAL / DIÁLOGO ---------------------------------------------------------------------------- */ .lpz-modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(5,8,20,.62); backdrop-filter:blur(3px); } .lpz-dialog{ width:min(460px,94vw); background:var(--lpz-surface); border-radius:var(--lpz-r-lg); padding:26px; box-shadow:var(--lpz-glow), 0 24px 60px rgba(0,0,0,.55); } .lpz-dialog__title{ font-family:var(--lpz-font-display); font-size:24px; text-align:center; color:var(--lpz-text); margin:0 0 20px; } .lpz-dialog__actions{ display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:20px; } /* ---------------------------------------------------------------------------- 13. AUTH (login centrado) ---------------------------------------------------------------------------- */ .lpz-auth{ display:grid; place-items:center; min-height:60vh; padding:40px 20px; } .lpz-auth__card{ width:min(380px,94vw); background:var(--lpz-surface); border-radius:var(--lpz-r-lg); padding:30px; box-shadow:var(--lpz-glow), var(--lpz-soft); } .lpz-auth__title{ font-family:var(--lpz-font-display); font-size:26px; text-align:center; margin:0 0 22px; color:var(--lpz-text); } /* ---------------------------------------------------------------------------- 14. HERO / DESTELLO / DIVISOR ---------------------------------------------------------------------------- */ .lpz-hero{ position:relative; overflow:hidden; color:#fff; border-radius:var(--lpz-r-lg); padding:56px 48px; background:linear-gradient(165deg, var(--lpz-sky-top) 0%, var(--lpz-sky-mid) 52%, var(--lpz-sky-low) 100%); } .lpz-hero__rays{ position:absolute; inset:-40%; pointer-events:none; opacity:.4; background:repeating-conic-gradient(from 0deg at 60% 40%, var(--lpz-accent) 0 5.5deg, transparent 5.5deg 12deg); -webkit-mask:radial-gradient(circle at 60% 40%, #000 30%, transparent 62%); mask:radial-gradient(circle at 60% 40%, #000 30%, transparent 62%); animation:lpz-spin 90s linear infinite; } .lpz-bar{ height:12px; background:var(--lpz-accent); box-shadow:0 -4px 0 var(--lpz-line); border-radius:0 0 var(--lpz-r-lg) var(--lpz-r-lg); } .lpz-spark{ display:inline-block; width:24px; height:24px; background:#fff; vertical-align:middle; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); filter:drop-shadow(0 0 6px rgba(255,255,255,.8)); animation:lpz-tw 3.4s ease-in-out infinite; } .lpz-spark--gold{ background:var(--lpz-gold); } .lpz-spark--cyan{ background:var(--lpz-accent); } .lpz-hr{ height:4px; border:0; border-radius:4px; background:var(--lpz-line); opacity:.25; margin:24px 0; } /* ---------------------------------------------------------------------------- 15. UTILIDADES ---------------------------------------------------------------------------- */ .lpz-row{ display:flex; gap:var(--lpz-gap); flex-wrap:wrap; align-items:center; } .lpz-col{ display:flex; flex-direction:column; gap:var(--lpz-gap); } .lpz-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .lpz-center{ text-align:center; } /* ---------------------------------------------------------------------------- 16. MOBILE — aprovechar el ancho de pantalla en tarjetas/tablas ---------------------------------------------------------------------------- */ @media (max-width: 767.98px){ .lpz-card{ padding:14px; } .lpz-note{ padding:10px 12px; gap:10px; flex-direction:column; align-items:center; text-align:center; } .lpz-note ul{ list-style:none !important; padding-left:0 !important; } .lpz-table thead th{ padding:10px; } .lpz-table td{ padding:10px; } } /* ---------------------------------------------------------------------------- 17. KEYFRAMES ---------------------------------------------------------------------------- */ @keyframes lpz-spin{ to{ transform:rotate(360deg); } } @keyframes lpz-tw{ 0%,100%{ transform:scale(.6) rotate(0); opacity:.4; } 50%{ transform:scale(1) rotate(45deg); opacity:1; } } @media (prefers-reduced-motion: reduce){ .lpz-spark,.lpz-hero__rays{ animation:none; } }