/* ╔══════════════════════════════════════════════════════════════════════════════╗ ║ B I T F A L L — style.css v3.0 "EL DESPERTAR DEL VACÍO" ║ ║ Fuentes: Cinzel (horror gótico) · Share Tech Mono (datos) ║ ║ 3 Skins: [data-skin="abyssal"] [data-skin="crimson"] [data-skin="frozen"] ║ ╚══════════════════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 0. SKIN VARIABLES — Cada skin sobreescribe las variables base ════════════════════════════════════════════════════════════════ */ :root { --accent: #00ff6a; --accent2: #bf00ff; --accent-rgb: 0,255,106; --bg-void: #04040a; --bg-panel: rgba(4,4,14,0.82); --border-dim: rgba(0,255,106,0.09); --border-act: rgba(0,255,106,0.40); --text-dim: rgba(0,255,106,0.35); --text-bright: #00ff6a; --font-display: 'Cinzel', serif; --font-mono: 'Share Tech Mono', monospace; --glow-sm: 0 0 8px rgba(0,255,106,0.5), 0 0 20px rgba(0,255,106,0.15); --glow-md: 0 0 14px rgba(0,255,106,0.6), 0 0 40px rgba(0,255,106,0.20); /* Safe area insets para iOS notch / Android gesture bar */ --sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } [data-skin="abyssal"] { --accent: #00ff6a; --accent2: #bf00ff; --accent-rgb: 0,255,106; --bg-void: #04040a; --bg-panel: rgba(4,4,14,0.82); --border-dim: rgba(0,255,106,0.09); --border-act: rgba(0,255,106,0.40); --text-dim: rgba(0,255,106,0.35); --text-bright:#00ff6a; --glow-sm: 0 0 8px rgba(0,255,106,0.5),0 0 20px rgba(0,255,106,0.15); --glow-md: 0 0 14px rgba(0,255,106,0.6),0 0 40px rgba(0,255,106,0.20); } [data-skin="crimson"] { --accent: #ff4400; --accent2: #ff0088; --accent-rgb: 255,68,0; --bg-void: #080200; --bg-panel: rgba(12,3,0,0.85); --border-dim: rgba(255,68,0,0.10); --border-act: rgba(255,68,0,0.45); --text-dim: rgba(255,100,0,0.38); --text-bright:#ff6600; --glow-sm: 0 0 8px rgba(255,68,0,0.6),0 0 20px rgba(255,68,0,0.15); --glow-md: 0 0 14px rgba(255,68,0,0.7),0 0 40px rgba(255,68,0,0.20); } [data-skin="frozen"] { --accent: #00d4ff; --accent2: #0066ff; --accent-rgb: 0,212,255; --bg-void: #01060f; --bg-panel: rgba(1,6,18,0.85); --border-dim: rgba(0,200,255,0.09); --border-act: rgba(0,200,255,0.40); --text-dim: rgba(0,180,255,0.35); --text-bright:#00d4ff; --glow-sm: 0 0 8px rgba(0,212,255,0.5),0 0 20px rgba(0,212,255,0.15); --glow-md: 0 0 14px rgba(0,212,255,0.6),0 0 40px rgba(0,212,255,0.20); } [data-skin="arcade"] { --accent: #ffffff; --accent2: #ffee00; --accent-rgb: 255,255,255; --bg-void: #000000; --bg-panel: rgba(8,8,8,0.90); --border-dim: rgba(255,255,255,0.10); --border-act: rgba(255,255,255,0.45); --text-dim: rgba(255,255,255,0.40); --text-bright:#ffffff; --glow-sm: 0 0 6px rgba(255,255,255,0.4),0 0 16px rgba(255,255,255,0.10); --glow-md: 0 0 12px rgba(255,255,255,0.6),0 0 32px rgba(255,255,255,0.15); } .no-scanlines::before, .no-scanlines body::before { display:none !important; } /* ════════════════════════════════════════════════════════════════ 1. RESET + BASE ════════════════════════════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size: clamp(13px,1.1vw+10px,16px); height: 100%; height: 100dvh; overflow: hidden; /* Prevenir bounce scroll en iOS Safari */ overscroll-behavior: none; -webkit-overflow-scrolling: auto; touch-action: none; } body { font-family: var(--font-mono); background: var(--bg-void); color: var(--text-bright); height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; /* Prevenir text selection en mobile durante juego */ -webkit-user-select: none; user-select: none; } /* Escanlines CRT */ body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(var(--accent-rgb),0.012) 3px,rgba(var(--accent-rgb),0.012) 4px); animation: scanlines 10s linear infinite; } /* Niebla hipnótica del fondo */ body::after { content:''; position:fixed; inset:-20%; pointer-events:none; z-index:0; background: radial-gradient(ellipse 40% 30% at 15% 85%, rgba(var(--accent-rgb),0.04) 0%,transparent 60%), radial-gradient(ellipse 35% 25% at 85% 15%, rgba(var(--accent-rgb),0.04) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,0,0,0.3) 0%,transparent 70%); animation: mistDrift 22s ease-in-out infinite alternate; } /* ════════════════════════════════════════════════════════════════ 2. KEYFRAMES ════════════════════════════════════════════════════════════════ */ @keyframes scanlines { to { background-position:0 100vh; } } @keyframes mistDrift { 0%{transform:translate(0,0) scale(1);}50%{transform:translate(3%,2%) scale(1.04);}100%{transform:translate(-2%,-1%) scale(1.02);} } @keyframes screenReveal { from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);} } @keyframes glowPulse { 0%,100%{text-shadow:0 0 8px var(--accent),0 0 24px rgba(var(--accent-rgb),0.2);}50%{text-shadow:0 0 20px var(--accent),0 0 60px rgba(var(--accent-rgb),0.3),0 0 4px #fff;} } @keyframes glowPulse2 { 0%,100%{text-shadow:0 0 8px var(--accent2),0 0 24px rgba(191,0,255,0.15);}50%{text-shadow:0 0 20px var(--accent2),0 0 60px rgba(191,0,255,0.25);} } @keyframes corruptPulse { 0%,100%{box-shadow:0 0 10px rgba(255,0,51,0.7),0 0 30px rgba(255,0,51,0.25);}50%{box-shadow:none;opacity:0.6;} } @keyframes achievToast { 0%{opacity:0;transform:translateX(120%);}10%{opacity:1;transform:translateX(0);}80%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(120%);} } @keyframes glitch { 0%,100%{clip-path:inset(0 0 100% 0);transform:translate(0);}5%{clip-path:inset(30% 0 50% 0);transform:translate(-4px,2px);}10%{clip-path:inset(70% 0 10% 0);transform:translate(4px,-2px);}15%{clip-path:inset(0 0 0 0);transform:translate(0);} } @keyframes glitchBefore { 0%,88%,100%{clip-path:inset(0 0 100% 0);transform:translate(0);}90%{clip-path:inset(20% 0 60% 0);transform:translate(-5px,0);color:var(--accent);}94%{clip-path:inset(60% 0 20% 0);transform:translate(5px,0);color:var(--accent2);} } @keyframes glitchAfter { 0%,85%,100%{clip-path:inset(0 0 100% 0);transform:translate(0);}87%{clip-path:inset(10% 0 70% 0);transform:translate(4px,-1px);color:var(--accent2);}91%{clip-path:inset(70% 0 10% 0);transform:translate(-4px,1px);} } @keyframes progressShimmer { 0%{background-position:-200% 0;}100%{background-position:200% 0;} } @keyframes comboBounce { 0%{transform:scale(0.4);opacity:0;}60%{transform:scale(1.3);opacity:1;}80%{transform:scale(0.9);}100%{transform:scale(1);opacity:1;} } @keyframes staggerReveal { from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);} } @keyframes blitzPulse { 0%,100%{box-shadow:0 0 8px rgba(255,204,0,0.6);}50%{box-shadow:0 0 20px rgba(255,204,0,0.9);} } @keyframes blitzCritical { 0%,100%{background:rgba(255,0,51,0.08);}50%{background:rgba(255,0,51,0.18);} } @keyframes eventFloat { 0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(0.9);}12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}78%{opacity:1;}100%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(0.95);} } @keyframes holdLocked { 0%,100%{opacity:1;}50%{opacity:0.25;} } @keyframes ripple { 0%{transform:scale(0);opacity:0.7;}100%{transform:scale(4);opacity:0;} } /* ════════════════════════════════════════════════════════════════ 3. TIPOGRAFÍA LOVECRAFTIANA — Cinzel Gothic ════════════════════════════════════════════════════════════════ */ button, [role="button"] { cursor: pointer; } #game-canvas { cursor: crosshair; } kbd { font-family:var(--font-mono); font-size:0.62rem; color:var(--accent); background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.25); border-bottom:2px solid rgba(var(--accent-rgb),0.4); border-radius:3px; padding:1px 5px; display:inline-block; box-shadow:0 2px 4px rgba(0,0,0,0.4); } /* ════════════════════════════════════════════════════════════════ 4. OVERLAY + PANTALLAS ════════════════════════════════════════════════════════════════ */ .screen-overlay { position: fixed; /* Respetar safe area del dispositivo */ top: var(--sat,0); bottom: var(--sab,0); left: var(--sal,0); right: var(--sar,0); z-index: 100; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(4,4,10,0.86) 40%, rgba(0,0,0,0.96) 100%); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .screen-overlay.hidden { display:none; } .screen { display:none; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; padding:22px 18px; max-width:440px; width:94%; text-align:center; position:relative; z-index:2; max-height: calc(100dvh - 20px); overflow-y: auto; overflow-x: hidden; background:linear-gradient(160deg,rgba(6,6,20,0.75) 0%,rgba(3,3,12,0.92) 100%); border:1px solid var(--border-dim); border-radius:10px; box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.04),0 0 50px rgba(0,0,0,0.7),inset 0 1px 0 rgba(var(--accent-rgb),0.06); scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),0.15) transparent; } .screen.active { display:flex; animation:screenReveal 0.45s both; } .screen::before { content:'— ✦ —'; font-family:var(--font-display); font-size:0.6rem; color:rgba(var(--accent-rgb),0.28); letter-spacing:.3em; position:absolute; top:10px; left:50%; transform:translateX(-50%); white-space:nowrap; } /* Logo */ .game-logo { font-family:var(--font-display); font-size:clamp(2.6rem,8vw,4.8rem); font-weight:900; letter-spacing:.04em; line-height:1; user-select:none; } .logo-bit { color:var(--accent); animation:glowPulse 3.2s ease-in-out infinite; display:inline-block; } .logo-fall { color:var(--accent2); animation:glowPulse2 3.2s ease-in-out infinite; animation-delay:1.6s; display:inline-block; transform:skewX(-3deg); } .screen-tagline { font-family:var(--font-mono); font-size:0.78rem; color:var(--text-dim); letter-spacing:.14em; text-transform:uppercase; line-height:1.5; } .screen-title { font-family:var(--font-display); font-size:clamp(1.1rem,3.5vw,1.6rem); font-weight:700; letter-spacing:.1em; color:var(--accent); text-shadow:0 0 14px rgba(var(--accent-rgb),0.5); } .screen-title.glitch { position:relative; color:#ff0033; text-shadow:0 0 14px rgba(255,0,51,0.6); animation:glitch 5s steps(1) infinite; } .screen-title.glitch::before,.screen-title.glitch::after { content:attr(data-text); position:absolute; inset:0; left:0; } .screen-title.glitch::before { animation:glitchBefore 5s steps(1) infinite; color:var(--accent); } .screen-title.glitch::after { animation:glitchAfter 5s steps(1) infinite; color:var(--accent2); } /* Skin selector */ .skin-row { display:flex; gap:8px; justify-content:center; padding:4px 0; } .skin-btn { font-family:var(--font-display); font-size:0.65rem; font-weight:700; letter-spacing:.1em; padding:6px 14px; border-radius:20px; cursor:pointer; background:transparent; color:var(--text-dim); border:1px solid var(--border-dim); transition:all .2s ease; display:flex; align-items:center; gap:6px; } .skin-btn:hover { border-color:rgba(var(--accent-rgb),0.4); color:var(--accent); } .skin-btn.active { background:rgba(var(--accent-rgb),0.1); color:var(--text-bright); border-color:rgba(var(--accent-rgb),0.5); box-shadow:var(--glow-sm); } .skin-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* Row de botones pequeños */ .start-row-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } /* Botones */ .btn-primary,.btn-secondary,.btn-ghost,.btn-ghost-sm,.btn-blitz,.btn-icon { font-family:var(--font-display); font-weight:700; letter-spacing:.12em; text-transform:uppercase; border:none; border-radius:6px; cursor:pointer; transition:transform .12s ease,box-shadow .12s ease,letter-spacing .12s ease; position:relative; overflow:hidden; } .btn-primary { background:linear-gradient(135deg,rgba(var(--accent-rgb),0.15) 0%,rgba(var(--accent-rgb),0.05) 100%); color:var(--text-bright); border:1px solid rgba(var(--accent-rgb),0.4); box-shadow:0 0 12px rgba(var(--accent-rgb),0.12),inset 0 1px 0 rgba(var(--accent-rgb),0.08); padding:14px 28px; font-size:.88rem; width:100%; max-width:280px; } .btn-primary:hover { transform:translateY(-2px); box-shadow:var(--glow-md); letter-spacing:.16em; border-color:rgba(var(--accent-rgb),0.7); } .btn-primary:active { transform:translateY(1px); } .btn-blitz { background:linear-gradient(135deg,rgba(255,200,0,0.12) 0%,rgba(255,100,0,0.06) 100%); color:#ffcc00; border:1px solid rgba(255,200,0,0.45); box-shadow:0 0 12px rgba(255,204,0,0.15); padding:11px 28px; font-size:.82rem; width:100%; max-width:280px; animation:blitzPulse 2s ease-in-out infinite; } .btn-blitz:hover { transform:translateY(-2px); box-shadow:0 0 20px rgba(255,204,0,0.4); } .btn-secondary { background:transparent; color:var(--accent2); border:1px solid rgba(191,0,255,0.35); box-shadow:0 0 8px rgba(191,0,255,0.08); padding:10px 22px; font-size:.8rem; width:100%; max-width:280px; } .btn-secondary:hover { background:rgba(191,0,255,0.06); box-shadow:0 0 16px rgba(191,0,255,0.25); transform:translateY(-1px); } .btn-ghost { background:transparent; color:rgba(var(--accent-rgb),0.32); border:1px solid var(--border-dim); padding:8px 18px; font-size:.72rem; width:100%; max-width:280px; letter-spacing:.1em; } .btn-ghost:hover { color:rgba(var(--accent-rgb),0.65); border-color:rgba(var(--accent-rgb),0.2); } .btn-ghost-sm { background:transparent; color:var(--text-dim); border:1px solid var(--border-dim); padding:6px 12px; font-size:.68rem; letter-spacing:.08em; border-radius:5px; } .btn-ghost-sm:hover { color:var(--text-bright); border-color:var(--border-act); } /* Botón instalación PWA */ .btn-install-pwa { display: block; width: 100%; padding: 10px 16px; margin-top: 6px; background: transparent; color: var(--accent); border: 1px dashed rgba(var(--accent-rgb), 0.5); border-radius: 6px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; cursor: pointer; transition: background .2s, box-shadow .2s, border-color .2s; animation: pulse-install 2.5s ease-in-out infinite; } .btn-install-pwa:hover { background: rgba(var(--accent-rgb), 0.07); border-color: var(--accent); box-shadow: var(--glow-sm); } @keyframes pulse-install { 0%,100% { opacity: .7; } 50% { opacity: 1; } } .btn-icon { background:rgba(var(--accent-rgb),0.04); color:rgba(var(--accent-rgb),0.5); border:1px solid var(--border-dim); width:36px; height:36px; font-size:1rem; display:flex; align-items:center; justify-content:center; padding:0; border-radius:4px; flex-shrink:0; } .btn-icon:hover { background:rgba(var(--accent-rgb),0.1); color:var(--text-bright); border-color:rgba(var(--accent-rgb),0.3); box-shadow:var(--glow-sm); } button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } /* Instrucciones rápidas */ .quick-instructions { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; font-size:.68rem; color:var(--text-dim); letter-spacing:.05em; border-top:1px solid var(--border-dim); padding-top:12px; width:100%; } .quick-instructions li { display:flex; align-items:center; gap:4px; animation:staggerReveal .4s both; } /* Final stats */ .final-stats { display:flex; flex-direction:column; gap:8px; width:100%; padding:12px; background:rgba(0,0,0,0.3); border:1px solid var(--border-dim); border-radius:6px; } .stat-item { display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; } .stat-item .stat-label { color:var(--text-dim); letter-spacing:.1em; font-family:var(--font-display); font-size:.7rem; } .stat-item .stat-value { font-family:var(--font-mono); font-size:1.1rem; color:var(--text-bright); text-shadow:var(--glow-sm); } /* Highscores */ .hs-tabs { display:flex; gap:8px; margin-bottom:8px; } .hs-tab { font-family:var(--font-display); font-size:.7rem; letter-spacing:.1em; padding:6px 16px; border-radius:20px; cursor:pointer; background:transparent; color:var(--text-dim); border:1px solid var(--border-dim); } .hs-tab.active { background:rgba(var(--accent-rgb),0.1); color:var(--text-bright); border-color:rgba(var(--accent-rgb),0.4); } .tab-content { width:100%; } .highscores-list { list-style:none; display:flex; flex-direction:column; gap:4px; width:100%; max-height:220px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),0.15) transparent; } .highscores-list li { display:flex; justify-content:space-between; padding:5px 8px; font-size:.78rem; border-bottom:1px solid var(--border-dim); animation:staggerReveal .3s both; } .highscores-list li:nth-child(1){ color:#ffcc00; } .highscores-list li:nth-child(2){ color:rgba(210,210,220,0.9); } .highscores-list li:nth-child(3){ color:rgba(180,140,100,0.9); } .hs-empty { color:var(--text-dim); text-align:center; font-style:italic; font-size:.78rem; padding:12px; } .online-scores { width:100%; max-height:200px; overflow-y:auto; } .hs-online-row { display:flex; justify-content:space-between; padding:5px 8px; font-size:.78rem; border-bottom:1px solid var(--border-dim); } /* Tutorial */ .tutorial-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; text-align:left; } .tutorial-item { display:flex; gap:10px; padding:8px; background:rgba(var(--accent-rgb),0.04); border:1px solid var(--border-dim); border-radius:6px; align-items:flex-start; } .tutorial-icon { font-size:1.4rem; flex-shrink:0; color:var(--text-bright); min-width:24px; text-align:center; } .tutorial-item strong { font-family:var(--font-display); font-size:.7rem; color:var(--text-bright); display:block; letter-spacing:.1em; margin-bottom:3px; } .tutorial-item p { font-size:.67rem; color:var(--text-dim); line-height:1.4; } .piece-legend { width:100%; padding:10px; background:rgba(0,0,0,0.25); border:1px solid var(--border-dim); border-radius:6px; } .piece-legend-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:6px; } .pl-item { font-size:.7rem; color:var(--text-dim); padding:2px 0; } /* Logros */ .achiev-list { display:flex; flex-direction:column; gap:8px; width:100%; max-height:360px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),0.15) transparent; } .achiev-item { display:flex; gap:10px; align-items:center; padding:8px 10px; background:rgba(var(--accent-rgb),0.05); border:1px solid var(--border-dim); border-radius:6px; } .achiev-item.locked { opacity:.35; filter:grayscale(1); } .achiev-icon-sm { font-size:1.5rem; flex-shrink:0; min-width:28px; text-align:center; } .achiev-title-sm { font-family:var(--font-display); font-size:.7rem; color:var(--text-bright); letter-spacing:.1em; } .achiev-desc-sm { font-size:.65rem; color:var(--text-dim); margin-top:2px; } /* ════════════════════════════════════════════════════════════════ 5. ACHIEVEMENT TOAST — Notificación emergente ════════════════════════════════════════════════════════════════ */ .achiev-toast { position:fixed; top:16px; right:16px; z-index:999; display:flex; align-items:center; gap:12px; padding:14px 18px; max-width:280px; background:linear-gradient(135deg,rgba(4,4,14,0.95),rgba(8,8,24,0.98)); border:1px solid rgba(var(--accent-rgb),0.5); border-radius:8px; box-shadow:var(--glow-md),0 4px 30px rgba(0,0,0,0.7); opacity:0; pointer-events:none; transform:translateX(120%); } .achiev-toast.visible { animation:achievToast 4s cubic-bezier(.22,.68,0,1.2) forwards; } .achiev-glow { position:absolute; inset:-1px; border-radius:8px; background:linear-gradient(135deg,rgba(var(--accent-rgb),0.08),transparent); pointer-events:none; } .achiev-icon-big { font-size:2rem; flex-shrink:0; } .achiev-body { text-align:left; } .achiev-label { font-family:var(--font-display); font-size:.6rem; color:var(--text-dim); letter-spacing:.2em; margin-bottom:3px; } .achiev-name { font-family:var(--font-display); font-size:.82rem; font-weight:700; color:var(--text-bright); text-shadow:var(--glow-sm); } .achiev-desc { font-size:.65rem; color:var(--text-dim); margin-top:2px; } /* ════════════════════════════════════════════════════════════════ 6. LAYOUT PRINCIPAL ════════════════════════════════════════════════════════════════ */ .game-wrapper { position:relative; z-index:10; display:grid; grid-template-columns:110px auto 110px; grid-template-areas:"stats board next"; align-items:center; justify-content:center; gap:8px; height:100dvh; padding:10px 8px 0; overflow:hidden; } .game-wrapper[hidden] { display:none !important; } /* ════════════════════════════════════════════════════════════════ 7. PANELES LATERALES ════════════════════════════════════════════════════════════════ */ .panel { display:flex; flex-direction:column; gap:12px; padding:10px; background:var(--bg-panel); border:1px solid var(--border-dim); border-radius:8px; box-shadow:0 4px 40px rgba(0,0,0,0.8),inset 0 1px 0 rgba(var(--accent-rgb),0.05); height:fit-content; max-height:calc(100dvh - 24px); overflow-y:auto; scrollbar-width:none; } .panel::-webkit-scrollbar { width: 3px; } .panel::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.12); border-radius: 2px; } @media (max-width:900px) { .panel::-webkit-scrollbar { display:none; } } .panel-stats { grid-area:stats; } .panel-next { grid-area:next; } .stat-block { display:flex; flex-direction:column; gap:2px; padding-bottom:10px; border-bottom:1px solid var(--border-dim); } .stat-block:last-child { border-bottom:none; padding-bottom:0; } .stat-label { font-family:var(--font-display); font-size:.62rem; font-weight:400; color:var(--text-dim); letter-spacing:.18em; text-transform:uppercase; line-height:1; } .stat-big { font-family:var(--font-mono); font-size:clamp(.9rem,2vw,1.3rem); color:var(--text-bright); text-shadow:var(--glow-sm); line-height:1.1; word-break:break-all; } .stat-medium { font-family:var(--font-mono); font-size:clamp(.8rem,1.8vw,.95rem); color:rgba(var(--accent-rgb),0.7); line-height:1.2; } .stat-big.accent { color:var(--accent2); text-shadow:0 0 10px var(--accent2); } /* Blitz timer */ .blitz-block { border-color:rgba(255,204,0,0.2); background:rgba(255,204,0,0.03); border-radius:4px; padding:6px; } .blitz-num { color:#ffcc00 !important; text-shadow:0 0 12px rgba(255,204,0,0.6) !important; font-size:1.6rem !important; } .blitz-warning .blitz-num { animation:blitzPulse .8s ease-in-out infinite; } .blitz-critical { animation:blitzCritical .4s ease-in-out infinite; } .combo-block { border-color:rgba(255,204,0,0.2); background:rgba(255,204,0,0.03); border-radius:4px; padding:6px; } .combo-value { color:#ffcc00 !important; text-shadow:0 0 14px rgba(255,204,0,0.6) !important; animation:comboBounce .35s both; font-size:1.3rem !important; } .level-progress-wrap { display:flex; flex-direction:column; gap:4px; } .progress-bar { width:100%; height:5px; background:rgba(var(--accent-rgb),0.06); border-radius:3px; border:1px solid var(--border-dim); overflow:hidden; } .progress-fill { height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,rgba(var(--accent-rgb),0.3),var(--accent),rgba(var(--accent-rgb),0.3)); background-size:200% 100%; animation:progressShimmer 2s linear infinite; transition:width .4s ease; box-shadow:0 0 6px rgba(var(--accent-rgb),0.5); } .game-controls-panel { display:flex; gap:6px; justify-content:center; padding-top:4px; } .preview-canvas { width:100%; aspect-ratio:1; max-width:100px; border-radius:4px; border:1px solid var(--border-dim); background:rgba(0,0,0,0.35); display:block; } .hold-canvas { opacity:.85; } .hold-used { font-family:var(--font-display); font-size:.55rem; letter-spacing:.1em; color:#ff0033; text-align:center; display:block; animation:holdLocked .8s step-start infinite; margin-top:2px; } .mechanic-hint { display:flex; align-items:flex-start; gap:6px; padding:6px; background:rgba(255,0,51,0.03); border:1px solid rgba(255,0,51,0.08); border-radius:4px; } .hint-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:2px; } .corrupt-dot { background:#ff0033; animation:corruptPulse 1.5s ease-in-out infinite; box-shadow:0 0 6px rgba(255,0,51,0.6); } .hint-text { font-size:.6rem; color:rgba(255,0,51,0.5); line-height:1.4; } .speed-bar { display:flex; gap:2px; height:18px; align-items:stretch; } .speed-segment { flex:1; border-radius:2px; background:rgba(var(--accent-rgb),0.05); border:1px solid rgba(var(--accent-rgb),0.08); transition:background .2s,box-shadow .2s; } .speed-segment.active { background:var(--accent); box-shadow:0 0 4px rgba(var(--accent-rgb),0.6); } .speed-segment.active.danger { background:#ff0033; box-shadow:0 0 4px rgba(255,0,51,0.6); } /* ════════════════════════════════════════════════════════════════ 8. SECCIÓN DEL TABLERO ════════════════════════════════════════════════════════════════ */ .board-section { grid-area:board; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; height:100dvh; padding:10px 0; } .game-canvas { display: block; border-radius: 4px; border: 1px solid rgba(var(--accent-rgb),0.14); box-shadow: 0 0 0 1px rgba(0,0,0,0.8),0 0 30px rgba(var(--accent-rgb),0.08),0 0 60px rgba(0,0,0,0.6); background: var(--bg-void); width: auto; image-rendering: pixelated; image-rendering: crisp-edges; /* GPU compositing — evita repaints en animaciones */ will-change: contents; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Prevenir highlight al tocar en móvil */ -webkit-tap-highlight-color: transparent; touch-action: none; } /* ════════════════════════════════════════════════════════════════ 9. MENSAJE DE EVENTO ════════════════════════════════════════════════════════════════ */ .event-message { position:absolute; top:33%; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:clamp(.85rem,2.5vw,1.3rem); font-weight:700; letter-spacing:.14em; text-align:center; white-space:nowrap; pointer-events:none; z-index:20; padding:6px 16px; border-radius:4px; opacity:0; color:var(--text-bright); text-shadow:0 0 14px rgba(var(--accent-rgb),0.8); background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.2); } .event-message.visible { animation:eventFloat 2.2s ease-out forwards; } .event-message.event-corrupt { color:#ff0033; text-shadow:0 0 14px rgba(255,0,51,0.8); background:rgba(255,0,51,0.06); border-color:rgba(255,0,51,0.25); } .event-message.event-tetris { color:#00e5ff; text-shadow:0 0 20px rgba(0,229,255,1); background:rgba(0,229,255,0.06); border-color:rgba(0,229,255,0.3); font-size:clamp(1rem,3.5vw,1.6rem); } .event-message.event-levelup { color:#ffcc00; text-shadow:0 0 20px rgba(255,204,0,0.9); background:rgba(255,204,0,0.06); border-color:rgba(255,204,0,0.3); } .event-message.event-combo { color:var(--accent2); text-shadow:0 0 14px var(--accent2); background:rgba(191,0,255,0.06); border-color:rgba(191,0,255,0.25); } /* ════════════════════════════════════════════════════════════════ 10. CONTROLES TÁCTILES REDISEÑADOS — Dos zonas ════════════════════════════════════════════════════════════════ */ /* Variantes de botones táctiles (únicas en este bloque) */ .t-hold { min-width:48px; min-height:40px; font-size:.72rem; background:rgba(255,204,0,0.06); border-color:rgba(255,204,0,0.20); color:rgba(255,204,0,0.85); } .t-hold:active { background:rgba(255,204,0,0.18); border-color:rgba(255,204,0,0.5); } .t-rotateCCW { min-width:46px; min-height:46px; border-radius:50%; font-size:1.1rem; background:rgba(191,0,255,0.05); border-color:rgba(191,0,255,0.2); color:rgba(191,0,255,0.75); } .t-rotateCCW:active { background:rgba(191,0,255,0.18); } .t-pause { min-width:44px; min-height:44px; background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.08); color:rgba(255,255,255,0.45); } .t-ability1 { min-width:44px; min-height:44px; font-size:1rem; background:rgba(0,229,255,0.04); border-color:rgba(0,229,255,0.12); color:rgba(0,229,255,0.6); } .t-ability2 { min-width:44px; min-height:44px; font-size:1rem; background:rgba(191,0,255,0.04); border-color:rgba(191,0,255,0.12); color:rgba(191,0,255,0.6); } /* ════════════════════════════════════════════════════════════════ 11. ESTADOS DINÁMICOS (JS los activa) ════════════════════════════════════════════════════════════════ */ .game-wrapper.is-paused .game-canvas { filter:brightness(.3) blur(1px); transition:filter .3s; } .game-wrapper.level-up .game-canvas { animation:glowPulse .6s ease-out; } .game-wrapper.speed-danger .game-canvas { border-color:rgba(255,0,51,.35); box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 30px rgba(255,0,51,.15),inset 0 0 30px rgba(0,0,0,.5); animation:corruptPulse 2s ease-in-out infinite; } .game-wrapper.corrupt-active .game-canvas { border-color:rgba(255,0,51,.55); } /* ════════════════════════════════════════════════════════════════ 12. SCROLLBAR + UTILIDADES ════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),.15); border-radius:2px; } ::selection { background:rgba(var(--accent-rgb),.2); color:var(--text-bright); } [hidden] { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ════════════════════════════════════════════════════════════════ CONTROLES DE VOLUMEN — Slider + Mute ════════════════════════════════════════════════════════════════ */ .volume-row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; padding: 6px 0; border-top: 1px solid var(--border-dim); border-bottom: 1px solid var(--border-dim); } .vol-label { font-family:var(--font-display); font-size:.58rem; color:var(--text-dim); letter-spacing:.15em; white-space:nowrap; } .volume-slider { -webkit-appearance:none; appearance:none; flex: 1; height: 4px; border-radius: 2px; outline: none; cursor: pointer; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--val,80%), rgba(var(--accent-rgb),0.1) var(--val,80%), rgba(var(--accent-rgb),0.1) 100%); } .volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-void); box-shadow:0 0 6px rgba(var(--accent-rgb),0.6); cursor:pointer; transition:transform .15s; } .volume-slider::-webkit-slider-thumb:hover { transform:scale(1.3); } .volume-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-void); cursor:pointer; } /* HUD en partida */ .volume-hud { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--border-dim); } .volume-hud .volume-slider { height:3px; } .volume-hud .btn-mute { width:28px; height:28px; font-size:.85rem; flex-shrink:0; } /* ════════════════════════════════════════════════════════════════ OVERLAY DE CONTROLES — Aparece 5s al iniciar partida ════════════════════════════════════════════════════════════════ */ .controls-hint { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .5s ease; } .controls-hint.visible { opacity: 1; pointer-events: auto; } .controls-hint-inner { background: rgba(4,4,14,0.92); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 8px; padding: 18px 20px; box-shadow: 0 0 40px rgba(0,0,0,0.8), 0 0 20px rgba(var(--accent-rgb),0.06); min-width: 200px; max-width: 260px; } .ch-title { font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .2em; text-align: center; margin-bottom: 12px; text-shadow: var(--glow-sm); } .ch-grid { display: flex; flex-direction: column; gap: 6px; } .ch-row { display: flex; align-items: center; gap: 10px; font-size: .73rem; } .ch-row kbd { min-width: 56px; text-align: center; flex-shrink: 0; } .ch-row span:last-child { color: rgba(255,255,255,0.6); } .ch-btn { font-family: var(--font-display); font-size: .65rem; color: var(--accent); background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 4px; padding: 2px 8px; min-width: 56px; text-align: center; flex-shrink: 0; } .ch-dismiss { font-size: .62rem; color: rgba(255,255,255,0.25); text-align: center; margin-top: 12px; letter-spacing: .06em; line-height: 1.4; } /* ════════════════════════════════════════════════════════════════ PANTALLA DE AJUSTES ════════════════════════════════════════════════════════════════ */ .settings-list { display:flex; flex-direction:column; gap:10px; width:100%; } .setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:rgba(var(--accent-rgb),0.04); border:1px solid var(--border-dim); border-radius:6px; } .setting-info { flex:1; text-align:left; } .setting-name { font-family:var(--font-display); font-size:.72rem; font-weight:700; color:var(--text-bright); letter-spacing:.12em; display:block; } .setting-desc { font-size:.65rem; color:var(--text-dim); margin-top:2px; display:block; } .toggle-btn { font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:6px 16px; border-radius:20px; cursor:pointer; flex-shrink:0; min-width:52px; background:rgba(var(--accent-rgb),0.06); color:var(--text-dim); border:1px solid var(--border-dim); transition:all .2s ease; } .toggle-btn.active { background:rgba(var(--accent-rgb),0.15); color:var(--text-bright); border-color:rgba(var(--accent-rgb),0.5); box-shadow:var(--glow-sm); } .toggle-btn.active::before { content:"ON"; } .toggle-btn:not(.active)::before { content:"OFF"; } .toggle-btn { font-size:0; } /* Texto lo pone ::before */ .toggle-btn::before { font-size:.7rem; } /* ════════════════════════════════════════════════════════════════ BOTÓN BLITZ SMALL en menú inicio ════════════════════════════════════════════════════════════════ */ .btn-blitz-sm { color:#ffcc00 !important; border-color:rgba(255,204,0,0.35) !important; } .btn-blitz-sm:hover { background:rgba(255,204,0,0.08) !important; } /* Info hint (reemplaza mechanic-hint en panel derecho) */ .info-hint { background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.07); } .info-hint .hint-text { color:rgba(255,255,255,0.28); } /* Touch rotate grande (sin hold ni habilidades) */ .t-rotate-big { min-width:72px !important; min-height:72px !important; font-size:1.8rem !important; border-radius:50% !important; } .touch-zone-right { gap:10px; justify-content:flex-end; } /* ════════════════════════════════════════════════════════════════ SISTEMA DE PROGRESIÓN — Nivel grande + Tier + Banner ════════════════════════════════════════════════════════════════ */ /* Número de nivel — el protagonista del panel */ .stat-level-num { font-family: var(--font-mono); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--accent); text-shadow: var(--glow-md); line-height: 1; display: block; letter-spacing: -.02em; transition: color .6s ease, text-shadow .6s ease; } /* Nombre del tier bajo el número */ .tier-name { font-family: var(--font-display); font-size: .62rem; letter-spacing: .22em; color: var(--accent); opacity: .8; margin-top: 2px; transition: color .6s ease; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* Barra de progreso con contador de líneas */ .progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; } .progress-lines-text { font-family: var(--font-mono); font-size: .65rem; color: rgba(255,255,255,0.35); } /* Banner de tier — aparece centrado sobre el tablero */ .tier-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; pointer-events: none; opacity: 0; transition: opacity .4s ease; text-align: center; } .tier-banner.visible { opacity: 1; animation: tierBannerAnim 3.5s ease forwards; } .tier-banner-inner { padding: 18px 28px; background: rgba(4,4,14,0.94); border: 1px solid currentColor; border-radius: 8px; box-shadow: 0 0 40px currentColor; } .tier-banner-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .28em; opacity: .5; margin-bottom: 6px; } .tier-banner-name { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; letter-spacing: .1em; line-height: 1; text-shadow: 0 0 20px currentColor, 0 0 60px currentColor; } .tier-banner-level { font-family: var(--font-mono); font-size: .72rem; opacity: .6; margin-top: 6px; letter-spacing: .15em; } @keyframes tierBannerAnim { 0% { opacity:0; transform:translate(-50%,-50%) scale(.85); } 12% { opacity:1; transform:translate(-50%,-50%) scale(1.05); } 20% { transform:translate(-50%,-50%) scale(1); } 70% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.95) translateY(-12px); } } /* ════════════════════════════════════════════════════════════════ TIER PREVIEW — Fila de colores en pantalla de inicio ════════════════════════════════════════════════════════════════ */ .tier-preview-row { display: flex; align-items: center; gap: 5px; padding: 6px 0; flex-wrap: wrap; justify-content: center; } .tier-pip { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; opacity: 0.7; transition: opacity .2s, transform .2s; cursor: default; } .tier-pip:hover { opacity: 1; transform: scale(1.4); } .tier-label-sm { font-family: var(--font-display); font-size: .6rem; letter-spacing: .18em; color: rgba(255,255,255,0.28); margin-left: 4px; white-space: nowrap; } /* Mostrar touch-controls en dispositivos táctiles */ .is-touch .touch-controls, .touch-controls:not([hidden]) { display: flex; } /* ════════════════════════════════════════════════════════════════ MOBILE HUD — Barra de estadísticas para móvil Se muestra SOLO cuando window.innerWidth ≤ 600 Posicionado encima del canvas, dentro de board-section COMPACTO: 48px de altura total ════════════════════════════════════════════════════════════════ */ .mobile-hud { width: 100%; background: linear-gradient(180deg, rgba(4,4,14,0.98) 0%, rgba(4,4,14,0.95) 100%); border-bottom: 1px solid rgba(var(--accent-rgb),0.25); padding: 2px 6px 2px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); backdrop-filter: blur(8px); /* En desktop siempre oculto — el JS lo muestra/oculta dinámicamente */ } .mhud-row { display: flex; align-items: center; gap: 4px; } .mhud-top { justify-content: space-between; } /* Cada celda de stat - más compacta */ .mhud-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1; gap: 1px; } .mhud-label { font-family: var(--font-display); font-size: 0.38rem; letter-spacing: .12em; color: rgba(var(--accent-rgb),0.4); line-height: 1; text-shadow: 0 0 4px rgba(var(--accent-rgb),0.3); } .mhud-value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-bright); line-height: 1; white-space: nowrap; text-shadow: 0 0 6px rgba(var(--accent-rgb),0.4); } .mhud-score { font-size: 0.75rem; } .mhud-level-cell { flex: 0 0 auto; padding: 0 2px; } .mhud-level-num { font-size: 1.15rem !important; font-weight: 800; transition: color .4s, text-shadow .4s; color: var(--accent); text-shadow: 0 0 10px var(--accent); line-height: 0.9 !important; } .mhud-tier { font-family: var(--font-display); font-size: 0.38rem; letter-spacing: .1em; color: var(--accent); transition: color .4s; white-space: nowrap; text-shadow: 0 0 6px var(--accent); } /* Mini canvas siguiente pieza - ultra compacto */ .mhud-next-cell { flex: 0 0 auto; } .mhud-next-canvas { width: 34px !important; height: 34px !important; border-radius: 4px; border: 1px solid rgba(var(--accent-rgb),0.2); background: rgba(0,0,0,0.5); display: block; box-shadow: inset 0 0 8px rgba(var(--accent-rgb),0.15); } /* Botón pausa en HUD móvil - más compacto */ .mhud-btn { font-size: 0.85rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.1) 0%, rgba(var(--accent-rgb),0.05) 100%); border: 1.5px solid rgba(var(--accent-rgb),0.2); border-radius: 6px; color: rgba(var(--accent-rgb),0.7); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); text-shadow: 0 0 6px rgba(var(--accent-rgb),0.5); } .mhud-btn:active { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.2) 0%, rgba(var(--accent-rgb),0.12) 100%); border-color: rgba(var(--accent-rgb),0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 10px rgba(var(--accent-rgb),0.4); } /* Barra de progreso móvil */ .mhud-bot { gap: 3px; align-items: center; } .mhud-progress-wrap { flex: 1; height: 3px; background: rgba(var(--accent-rgb),0.08); border-radius: 2px; overflow: hidden; } .mhud-progress-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--accent); box-shadow: 0 0 4px var(--accent); transition: width 0.3s ease, background 0.5s; } .mhud-progress-text { font-family: var(--font-mono); font-size: 0.56rem; color: rgba(var(--accent-rgb),0.4); white-space: nowrap; flex-shrink: 0; } .mhud-blitz { font-family: var(--font-display); font-size: 0.65rem; color: #ffcc00; font-weight: 700; flex-shrink: 0; } .mhud-blitz.blitz-warning { animation: blitzPulse .8s ease-in-out infinite; } .mhud-blitz.blitz-critical { color: #ff0033; animation: blitzPulse .4s ease-in-out infinite; } /* ── Ocultar en desktop ── */ @media (min-width: 601px) { .mobile-hud { display: none !important; } } /* ════════════════════════════════════════════════════════════════ TOUCH CONTROLS v3 — Optimizados para espacio Layout: [◀ ▼ ▶ / DROP] ──── [↻ ↻ / ⏸] Altura optimizada: 85px (era 110px) ════════════════════════════════════════════════════════════════ */ .touch-controls { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 4px max(8px,var(--sar)) max(8px,var(--sab)) max(8px,var(--sal)); background: linear-gradient(0deg, rgba(4,4,10,0.98) 70%, transparent); flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 5px; min-height: 85px; } /* Mostrar en táctil o pantallas pequeñas */ .is-touch .touch-controls, .touch-controls:not([hidden]) { display: flex; } @media (max-width: 600px) { .touch-controls { display: flex !important; } } .touch-zone { display: flex; flex-direction: column; gap: 4px; align-items: center; } .touch-zone-left { flex: 1; align-items: flex-start; } .touch-zone-right { flex: 0 0 auto; align-items: flex-end; gap: 4px; } /* D-pad */ .touch-dpad { display: flex; gap: 3px; align-items: center; } /* Botón base - ULTRA PREMIUM con efectos neón y gradientes */ .touch-btn { font-family: var(--font-display); font-weight: 800; color: rgba(var(--accent-rgb), 0.95); background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.05) 50%, rgba(var(--accent-rgb), 0.12) 100%); border: 2px solid rgba(var(--accent-rgb), 0.35); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; transition: all .15s cubic-bezier(0.4, 0, 0.2, 1); min-width: 50px; min-height: 50px; font-size: 1.05rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255,255,255,0.08); text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); backdrop-filter: blur(4px); } /* Efecto de brillo animado en el borde */ .touch-btn::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; padding: 2px; background: linear-gradient(45deg, transparent, rgba(var(--accent-rgb), 0.4), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; } .touch-btn:active::before { opacity: 1; } .touch-btn:active { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.18) 50%, rgba(var(--accent-rgb), 0.28) 100%); border-color: rgba(var(--accent-rgb), 0.75); transform: scale(0.92) translateY(2px); box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 25px rgba(var(--accent-rgb), 0.5), inset 0 2px 8px rgba(var(--accent-rgb), 0.3); } /* Ripple ultra premium con partículas */ .touch-btn::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.8) 0%, transparent 70%); transform: scale(0); opacity: 0; top: 50%; left: 50%; margin: -10px 0 0 -10px; box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.8); } .touch-btn:active::after { animation: ripplePremium .4s cubic-bezier(0, 0, 0.2, 1) forwards; } @keyframes ripplePremium { 0% { transform: scale(0); opacity: 1; } 50% { opacity: 0.8; } 100% { transform: scale(6); opacity: 0; } } /* Variantes específicas - ULTRA PREMIUM */ .t-left, .t-right { min-width: 54px; min-height: 54px; font-size: 1.4rem; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.08) 100%); border-width: 2.5px; box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 25px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255,255,255,0.12); } .t-left:active, .t-right:active { box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 30px rgba(var(--accent-rgb), 0.6), inset 0 2px 10px rgba(var(--accent-rgb), 0.4); } .t-down { min-width: 48px; min-height: 48px; font-size: 1.15rem; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.06) 100%); } /* Botón DROP - Cian ultra vibrante */ .t-hard { flex: 1; max-width: 200px; min-height: 42px; font-size: 0.75rem; letter-spacing: .12em; background: linear-gradient(135deg, rgba(0,229,255,0.15) 0%, rgba(0,180,255,0.10) 50%, rgba(0,229,255,0.15) 100%); border: 2.5px solid rgba(0,229,255,0.4); color: rgba(0,229,255,0.98); border-radius: 12px; align-self: stretch; font-weight: 900; box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 25px rgba(0,229,255,0.25), inset 0 1px 0 rgba(255,255,255,0.15); text-shadow: 0 0 10px rgba(0,229,255, 0.8); } .t-hard:active { background: linear-gradient(135deg, rgba(0,229,255,0.3) 0%, rgba(0,180,255,0.22) 50%, rgba(0,229,255,0.3) 100%); border-color: rgba(0,229,255,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 35px rgba(0,229,255,0.7), inset 0 2px 10px rgba(0,229,255,0.5); } /* Botones de rotar - Morado ultra premium con efectos pulsantes */ .t-rotate-big { min-width: 62px !important; min-height: 62px !important; border-radius: 50% !important; font-size: 1.8rem !important; background: radial-gradient(circle at 30% 30%, rgba(191,0,255,0.18) 0%, rgba(150,0,200,0.10) 50%, rgba(191,0,255,0.12) 100%) !important; border: 3px solid rgba(191,0,255,0.45) !important; color: rgba(191,0,255,1) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 30px rgba(191,0,255,0.3), inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -2px 8px rgba(191,0,255,0.2) !important; text-shadow: 0 0 12px rgba(191,0,255,0.8) !important; position: relative; overflow: visible; } /* Pulso sutil en el botón de rotar */ @keyframes rotatePulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 30px rgba(191,0,255,0.3), inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -2px 8px rgba(191,0,255,0.2); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 40px rgba(191,0,255,0.5), inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -2px 8px rgba(191,0,255,0.2); } } .t-rotate-big { animation: rotatePulse 2s ease-in-out infinite; } .t-rotate-big:active { background: radial-gradient(circle at 30% 30%, rgba(191,0,255,0.35) 0%, rgba(150,0,200,0.25) 50%, rgba(191,0,255,0.30) 100%) !important; border-color: rgba(191,0,255,0.85) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 45px rgba(191,0,255,0.8), inset 0 3px 12px rgba(191,0,255,0.5) !important; animation: none; } .t-rotateCCW { min-width: 48px; min-height: 48px; border-radius: 50% !important; font-size: 1.1rem; background: linear-gradient(135deg, rgba(191,0,255,0.12) 0%, rgba(150,0,200,0.06) 100%); border: 2px solid rgba(191,0,255,0.3); color: rgba(191,0,255,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(191,0,255,0.2), inset 0 1px 0 rgba(255,255,255,0.1); text-shadow: 0 0 8px rgba(191,0,255,0.6); } .t-rotateCCW:active { background: linear-gradient(135deg, rgba(191,0,255,0.25) 0%, rgba(150,0,200,0.18) 100%); border-color: rgba(191,0,255,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 30px rgba(191,0,255,0.6), inset 0 2px 10px rgba(191,0,255,0.4); } .t-pause { min-width: 40px; min-height: 40px; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(200,200,200,0.08) 100%); border: 2px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); border-radius: 10px; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 15px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2); text-shadow: 0 0 6px rgba(255,255,255,0.5); } .t-pause:active { background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(200,200,200,0.15) 100%); border-color: rgba(255,255,255,0.5); box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 20px rgba(255,255,255,0.3), inset 0 2px 8px rgba(255,255,255,0.2); } /* iPhone SE y pantallas muy pequeñas */ @media (max-width: 375px) { .touch-btn { min-width: 44px !important; min-height: 44px !important; font-size: 0.95rem !important; } .t-rotate-big { min-width: 56px !important; min-height: 56px !important; font-size: 1.4rem !important; } .t-left, .t-right { min-width: 48px !important; min-height: 48px !important; } .touch-controls { min-height: 78px; } } /* ════════════════════════════════════════════════════════════════ 13. RESPONSIVE ════════════════════════════════════════════════════════════════ */ /* ── Móvil (≤600px) ── */ @media (max-width:600px){ .game-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "board"; padding: 0; gap: 0; height: 100dvh; } .panel-stats, .panel-next { display: none !important; } .board-section { justify-content: flex-start; height: 100dvh; padding: 0; overflow: hidden; } /* Canvas se adapta dinámicamente - el JS calcula su tamaño correcto */ .game-canvas { margin: 0 auto; display: block; /* Sin max-height - el resize() de JS controla el tamaño */ } .quick-instructions { display: none; } .tutorial-grid { grid-template-columns: 1fr; } /* Pantallas de menú más compactas */ .screen { padding: 16px 14px; gap: 8px; } .game-logo { font-size: clamp(2.2rem,12vw,3.5rem); } .tier-preview-row { gap: 3px; } .tier-pip { width: 11px; height: 11px; } } /* ── Tablet (601–900px) ── */ @media (min-width:601px) and (max-width:900px){ .game-wrapper { grid-template-columns:90px auto 90px; gap:6px; } .panel { padding:8px; gap:10px; } .touch-controls { display:flex; } .game-canvas { max-height:calc(100dvh - 200px); } } /* ── Laptop (901–1200px) ── */ @media (min-width:901px) and (max-width:1200px){ .game-wrapper { grid-template-columns:110px auto 110px; gap:8px; } .touch-controls { display:none; } } /* ── Desktop (≥1201px) ── */ @media (min-width:1201px){ .game-wrapper { grid-template-columns:130px auto 130px; gap:10px; padding-top:12px; } .panel { padding:12px; } .touch-controls { display:none; } .stat-big { font-size:1.5rem; } } /* ── Landscape móvil (alto ≤ 500px) — paneles laterales finos ── */ @media (max-height:500px) and (orientation:landscape) { .game-wrapper { grid-template-columns: 75px auto 75px; grid-template-areas: "stats board next"; padding: 2px 4px 0; gap: 4px; } .panel-stats, .panel-next { display: flex; padding: 6px; gap: 6px; font-size:.72rem; } .level-progress-wrap, .mechanic-hint, .speed-block, .game-controls-panel, .volume-hud { display: none; } .touch-controls { display: none !important; } .game-canvas { max-height: calc(100dvh - 4px); } .stat-big { font-size: .9rem; } .stat-label { font-size: .55rem; } .tier-name { font-size: .5rem; } } /* ── iPad / tablet 768-1024px ── */ @media (min-width:768px) and (max-width:1024px) and (min-height:600px) { .game-wrapper { grid-template-columns: 100px auto 100px; gap: 8px; } .stat-level-num { font-size: 2.2rem; } .touch-controls { display: flex; } /* tablets también muestran táctil */ } /* ── Pantallas 4K / muy grandes ── */ @media (min-width:1920px) { .game-wrapper { grid-template-columns: 150px auto 150px; gap: 14px; } .stat-level-num { font-size: 3.5rem; } .stat-big { font-size: 1.6rem; } } /* ── Móvil pequeño (≤375px) — iPhone SE ── */ @media (max-width:375px) { .touch-btn { min-width: 44px !important; min-height: 44px !important; font-size: .75rem !important; } .t-rotate-big { min-width: 58px !important; min-height: 58px !important; font-size: 1.4rem !important; } .t-hard { font-size: .65rem !important; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .progress-fill { transition:width .1s linear !important; } } /* ── Alto contraste ── */ @media (prefers-contrast:high){ :root { --border-dim:rgba(var(--accent-rgb),.4); --border-act:rgba(var(--accent-rgb),.8); } .stat-big,.stat-medium { text-shadow:none; } } /* ════════════════════════════════════════════════════════════════ NUEVAS FEATURES v4 ════════════════════════════════════════════════════════════════ */ /* XP Badge row on start screen */ .xp-badge-row { display:flex; align-items:center; gap:8px; width:100%; max-width:280px; padding:6px 10px; background:rgba(var(--accent-rgb),0.05); border:1px solid var(--border-dim); border-radius:20px; } .player-xp-badge { font-family:var(--font-display); font-size:.65rem; font-weight:700; color:var(--accent); letter-spacing:.1em; white-space:nowrap; flex-shrink:0; } .xp-bar-wrap { flex:1; height:4px; background:rgba(var(--accent-rgb),0.1); border-radius:2px; overflow:hidden; } .xp-bar-fill { height:100%; width:0%; background:var(--accent); border-radius:2px; box-shadow:0 0 6px rgba(var(--accent-rgb),0.6); transition:width .6s ease; } .xp-txt { font-family:var(--font-mono); font-size:.6rem; color:var(--text-dim); white-space:nowrap; flex-shrink:0; } /* Daily result badge */ .daily-result-badge { font-family:var(--font-mono); font-size:.72rem; min-height:1.1em; letter-spacing:.08em; color:var(--text-dim); text-align:center; } /* Mode buttons */ .btn-sprint-sm { color:#00ff99 !important; border-color:rgba(0,255,153,0.35) !important; } .btn-sprint-sm:hover { background:rgba(0,255,153,0.08) !important; } .btn-zen-sm { color:#88ccff !important; border-color:rgba(136,204,255,0.35) !important; } .btn-zen-sm:hover { background:rgba(136,204,255,0.08) !important; } .btn-daily-sm { color:#ffcc00 !important; border-color:rgba(255,204,0,0.35) !important; } .btn-daily-sm:hover { background:rgba(255,204,0,0.08) !important; } /* XP on game-over */ .final-xp-display { font-family:var(--font-display); font-size:.82rem; font-weight:700; color:var(--accent); text-align:center; letter-spacing:.1em; padding:8px 0; min-height:1.2em; text-shadow:var(--glow-sm); } /* Next queue small canvases */ .next-queue-row { display:flex; gap:4px; justify-content:center; margin-top:4px; } .preview-canvas-sm { width:60px !important; height:60px !important; border-radius:3px; border:1px solid var(--border-dim); background:rgba(0,0,0,0.35); display:block; box-shadow:inset 0 0 4px rgba(var(--accent-rgb),0.1); } /* Missions panel */ .missions-list { display:flex; flex-direction:column; gap:8px; width:100%; max-height:320px; overflow-y:auto; scrollbar-width:thin; } .mission-item { padding:10px 12px; background:rgba(var(--accent-rgb),0.04); border:1px solid var(--border-dim); border-radius:6px; } .mission-item.mission-done { border-color:rgba(var(--accent-rgb),0.4); background:rgba(var(--accent-rgb),0.08); } .mission-desc { font-family:var(--font-display); font-size:.72rem; font-weight:700; color:var(--text-bright); letter-spacing:.1em; margin-bottom:5px; } .mission-progress { width:100%; height:4px; background:rgba(var(--accent-rgb),0.08); border-radius:2px; overflow:hidden; margin-bottom:3px; } .mission-bar { height:100%; background:var(--accent); border-radius:2px; transition:width .4s; } .mission-meta { font-family:var(--font-mono); font-size:.62rem; color:var(--text-dim); } .mission-item.mission-done .mission-meta { color:var(--accent); } /* Stats grid */ .stats-grid { display:flex; flex-direction:column; gap:6px; width:100%; } .stat-row { display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; padding:5px 8px; border-bottom:1px solid var(--border-dim); } .stat-row span:first-child { font-family:var(--font-display); font-size:.68rem; color:var(--text-dim); letter-spacing:.1em; } .stat-row span:last-child { font-family:var(--font-mono); color:var(--text-bright); } /* Lore Overlay */ .lore-overlay { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.82); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .5s ease; } .lore-overlay.visible { opacity:1; pointer-events:auto; } .lore-inner { max-width:420px; padding:32px 28px; text-align:center; background:linear-gradient(160deg,rgba(4,4,20,0.97),rgba(2,2,10,0.99)); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:10px; box-shadow:0 0 60px rgba(var(--accent-rgb),0.2),inset 0 0 40px rgba(0,0,0,0.5); animation:loreInner 0.4s ease both; } .lore-text { font-family:var(--font-display); font-size:clamp(.8rem,2.2vw,1rem); color:rgba(var(--accent-rgb),0.85); line-height:1.8; letter-spacing:.05em; text-shadow:0 0 10px rgba(var(--accent-rgb),0.3); } .lore-dismiss { display:block; margin-top:18px; font-family:var(--font-mono); font-size:.6rem; color:rgba(255,255,255,0.25); letter-spacing:.18em; animation:loreBlinkDismiss 2s ease-in-out infinite; } @keyframes loreInner { from{ opacity:0; transform:scale(.93); } to { opacity:1; transform:scale(1); } } @keyframes loreBlinkDismiss { 0%,100%{ opacity:.25; } 50%{ opacity:.65; } } /* ════════════════════════════════════════════════════════════════ VOLUME SLIDER — color sigue la posición de la bolita (--val set by JS) ════════════════════════════════════════════════════════════════ */ .volume-slider { -webkit-appearance:none; appearance:none; flex: 1; height: 5px; border-radius: 3px; outline: none; cursor: pointer; background: linear-gradient( to right, var(--accent) 0%, var(--accent) var(--val,80%), rgba(var(--accent-rgb),0.12) var(--val,80%), rgba(var(--accent-rgb),0.12) 100% ); transition: background .05s; } .volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #fff 0%, var(--accent) 50%); border:2px solid var(--bg-void); box-shadow:0 0 8px rgba(var(--accent-rgb),0.8), 0 2px 4px rgba(0,0,0,0.5); cursor:pointer; transition:transform .15s, box-shadow .15s; } .volume-slider::-webkit-slider-thumb:hover { transform:scale(1.35); box-shadow:0 0 14px rgba(var(--accent-rgb),1); } .volume-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-void); cursor:pointer; box-shadow:0 0 8px rgba(var(--accent-rgb),0.7); } /* ════════════════════════════════════════════════════════════════ VOID RINGS — Start screen background decoration ════════════════════════════════════════════════════════════════ */ .void-rings { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; z-index:0; } .void-ring { position:absolute; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.06); animation: voidRingExpand 7s ease-out infinite; } .void-ring:nth-child(1){ animation-delay:0s; } .void-ring:nth-child(2){ animation-delay:2.3s; } .void-ring:nth-child(3){ animation-delay:4.6s; } @keyframes voidRingExpand { 0% { width:0; height:0; opacity:.6; } 100%{ width:280%; height:280%; opacity:0; } } /* ════════════════════════════════════════════════════════════════ START SCREEN — Entrance stagger animations ════════════════════════════════════════════════════════════════ */ @keyframes logoEntrance { 0% { opacity:0; transform:scale(2.2) translateY(-10px); filter:blur(14px); letter-spacing:.6em; } 50% { filter:blur(0); } 80% { transform:scale(.98) translateY(2px); } 100%{ opacity:1; transform:scale(1) translateY(0); letter-spacing:.04em; } } @keyframes slideUpFade { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } #screen-start.active .game-logo { animation:logoEntrance .9s cubic-bezier(.15,.65,.3,1.15) both; } #screen-start.active .screen-tagline { animation:slideUpFade .5s .20s both; } #screen-start.active .tier-preview-row { animation:slideUpFade .45s .30s both; } #screen-start.active .skin-row { animation:slideUpFade .45s .38s both; } #screen-start.active .xp-badge-row { animation:slideUpFade .45s .44s both; } #screen-start.active .daily-result-badge { animation:slideUpFade .45s .48s both; } #screen-start.active .btn-primary { animation:slideUpFade .5s .52s both; } #screen-start.active .start-row-btns:nth-of-type(1){ animation:slideUpFade .45s .58s both; } #screen-start.active .start-row-btns:nth-of-type(2){ animation:slideUpFade .45s .64s both; } #screen-start.active .start-row-btns:nth-of-type(3){ animation:slideUpFade .45s .70s both; } #screen-start.active .volume-row { animation:slideUpFade .4s .76s both; } #screen-start.active .quick-instructions { animation:slideUpFade .4s .82s both; } #screen-start.active .btn-install-pwa { animation:slideUpFade .4s .88s both; } /* ════════════════════════════════════════════════════════════════ GAME START — Dramatic transition overlay ════════════════════════════════════════════════════════════════ */ .void-descend { position:fixed; inset:0; z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; opacity:0; background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 100%); } .void-descend.active { animation:vdFull 1.8s cubic-bezier(.22,.6,.3,1) forwards; } @keyframes vdFull { 0% { opacity:0; background:radial-gradient(ellipse 0% 0% at 50% 50%,rgba(0,0,0,.98) 0%,rgba(0,0,0,0) 100%); } 18% { opacity:1; background:radial-gradient(ellipse 200% 200% at 50% 50%,rgba(0,0,0,.97) 0%,rgba(0,0,0,.94) 100%); } 55% { opacity:1; background:radial-gradient(ellipse 200% 200% at 50% 50%,rgba(0,0,0,.85) 0%,rgba(0,0,0,.7) 100%); } 100%{ opacity:0; background:radial-gradient(ellipse 200% 200% at 50% 50%,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%); } } /* Anillos del overlay de inicio */ .vd-rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .vd-rings div { position:absolute; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.15); animation:vdRing 1.8s ease-out forwards; } .vd-rings div:nth-child(1){ animation-delay:.05s; } .vd-rings div:nth-child(2){ animation-delay:.20s; } .vd-rings div:nth-child(3){ animation-delay:.35s; } @keyframes vdRing { 0% { width:0; height:0; opacity:.8; } 100%{ width:280vmax; height:280vmax; opacity:0; } } .vd-inner { display:flex; flex-direction:column; align-items:center; gap:10px; animation:vdInner 1.8s ease-out both; } @keyframes vdInner { 0% { opacity:0; transform:scale(.7); filter:blur(10px); } 20% { opacity:1; transform:scale(1.04); filter:blur(0); } 60% { opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.08) translateY(-12px); } } .vd-text { font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,6vw,3.2rem); letter-spacing:.22em; text-align:center; color:var(--accent); text-shadow:0 0 30px var(--accent),0 0 80px rgba(var(--accent-rgb),.4),0 0 150px rgba(var(--accent-rgb),.15); } .vd-sub { font-family:var(--font-mono); font-size:clamp(.65rem,1.5vw,.9rem); letter-spacing:.35em; color:rgba(var(--accent-rgb),.4); } /* ════════════════════════════════════════════════════════════════ GAME BOARD — Dramatic entrance when game starts ════════════════════════════════════════════════════════════════ */ @keyframes boardEntrance { 0% { opacity:0; clip-path:inset(100% 0 0 0); } 40% { clip-path:inset(0% 0 0 0); opacity:1; } 60% { transform:scaleX(1.008); } 100%{ transform:scaleX(1); opacity:1; clip-path:inset(0% 0 0 0); } } .board-entering { animation:boardEntrance .75s cubic-bezier(.15,.7,.3,1) both !important; } /* ════════════════════════════════════════════════════════════════ GAME OVER — Score counter + dramatic entrance ════════════════════════════════════════════════════════════════ */ @keyframes statValueCount { from { opacity:0; transform:translateY(8px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } } #screen-gameover.active .final-stats { animation:slideUpFade .5s .15s both; } #screen-gameover.active .final-xp-display { animation:slideUpFade .5s .45s both; } #screen-gameover.active .btn-primary { animation:slideUpFade .45s .55s both; } #screen-gameover.active .btn-secondary{ animation:slideUpFade .45s .65s both; } .stat-value.counting { color:var(--accent) !important; text-shadow:0 0 20px var(--accent) !important; } /* ════════════════════════════════════════════════════════════════ BUTTONS — Más coherentes y premium ════════════════════════════════════════════════════════════════ */ .btn-primary { background:linear-gradient(135deg,rgba(var(--accent-rgb),.18) 0%,rgba(var(--accent-rgb),.06) 100%); color:var(--text-bright); border:1.5px solid rgba(var(--accent-rgb),.5); box-shadow:0 0 16px rgba(var(--accent-rgb),.14),0 4px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08); padding:15px 32px; font-size:.9rem; width:100%; max-width:280px; position:relative; overflow:hidden; transition:transform .15s ease,box-shadow .15s ease,letter-spacing .15s ease,border-color .15s ease; } .btn-primary:hover { transform:translateY(-3px); box-shadow:0 0 28px rgba(var(--accent-rgb),.35),0 8px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1); letter-spacing:.16em; border-color:rgba(var(--accent-rgb),.8); } .btn-primary:active { transform:translateY(0px); box-shadow:0 0 8px rgba(var(--accent-rgb),.2); } /* Ripple en PLAY */ @keyframes btnRippleOut { 0% { transform:scale(0); opacity:.6; } 100%{ transform:scale(4.5); opacity:0; } } .btn-primary .btn-ripple { position:absolute; border-radius:50%; background:rgba(var(--accent-rgb),.35); width:60px; height:60px; margin:-30px; animation:btnRippleOut .6s ease-out forwards; pointer-events:none; } /* ════════════════════════════════════════════════════════════════ MOBILE PIECES ROW — HOLD + NEXT QUEUE visible en móvil ════════════════════════════════════════════════════════════════ */ .mhud-pieces { justify-content: center; align-items: center; gap: 5px; padding: 4px 8px 3px; border-top: 1px solid rgba(var(--accent-rgb),0.14); background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 100%); } .mhud-piece-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; } .mhud-plabel { font-family: var(--font-display); font-size: 0.36rem; letter-spacing: .14em; color: rgba(var(--accent-rgb),0.38); line-height: 1; text-shadow: 0 0 4px rgba(var(--accent-rgb),0.2); } .mhud-pcanvas { border-radius: 4px; border: 1px solid rgba(var(--accent-rgb),0.22); background: rgba(0,0,0,0.55); display: block; box-shadow: inset 0 0 8px rgba(var(--accent-rgb),0.08), 0 0 6px rgba(0,0,0,0.5); flex-shrink: 0; } .mhud-pcanvas-hold { width: 38px !important; height: 38px !important; border-color: rgba(255,204,0,0.25); box-shadow: inset 0 0 8px rgba(255,204,0,0.06); } .mhud-pcanvas-next { width: 42px !important; height: 42px !important; border-color: rgba(var(--accent-rgb),0.35); box-shadow: inset 0 0 10px rgba(var(--accent-rgb),0.12), 0 0 8px rgba(var(--accent-rgb),0.08); } .mhud-pcanvas-sm { width: 32px !important; height: 32px !important; opacity: 0.8; } .mhud-pieces-sep { font-size: .5rem; color: rgba(var(--accent-rgb),0.2); flex-shrink: 0; align-self: center; margin: 0 2px; } /* ── Ocultar next-canvas-mobile cuando ya no está en mhud-top ── */ @media (min-width: 601px) { .mhud-pieces { display: none !important; } } /* ════════════════════════════════════════════════════════════════ LOVECRAFTIAN DESIGN OVERHAUL — Animaciones y efectos premium ════════════════════════════════════════════════════════════════ */ /* 1. Canvas principal — respira como un ser vivo */ @keyframes voidBreath { 0%,100% { box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 25px rgba(var(--accent-rgb),.09), 0 0 60px rgba(0,0,0,.7), inset 0 0 20px rgba(0,0,0,.4); border-color: rgba(var(--accent-rgb),.14); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 45px rgba(var(--accent-rgb),.20), 0 0 90px rgba(var(--accent-rgb),.07), inset 0 0 30px rgba(0,0,0,.3); border-color: rgba(var(--accent-rgb),.26); } } .game-canvas { animation: voidBreath 5s ease-in-out infinite; } /* 2. Logo: animación de apertura cósmica */ @keyframes cosmicLogo { 0%,100% { text-shadow: 0 0 8px var(--accent), 0 0 24px rgba(var(--accent-rgb),.2); letter-spacing: .04em; } 50% { text-shadow: 0 0 25px var(--accent), 0 0 70px rgba(var(--accent-rgb),.35), 0 0 4px #fff; letter-spacing: .07em; } } @keyframes cosmicLogo2 { 0%,100% { text-shadow: 0 0 8px var(--accent2), 0 0 24px rgba(191,0,255,.15); letter-spacing: -.01em; } 50% { text-shadow: 0 0 25px var(--accent2), 0 0 70px rgba(191,0,255,.3), 0 0 120px rgba(191,0,255,.1); letter-spacing: -.03em; } } .logo-bit { animation: cosmicLogo 3.2s ease-in-out infinite; } .logo-fall { animation: cosmicLogo2 3.2s ease-in-out infinite; animation-delay:1.6s; } /* Línea decorativa bajo el logo */ .game-logo { position: relative; } .game-logo::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent); animation: logoUnderline 4s ease-in-out infinite; border-radius: 1px; } @keyframes logoUnderline { 0%,100% { width: 35%; opacity: .25; } 50% { width: 85%; opacity: .7; } } /* 3. Evento TETRIS/T-Spin — rift cósmico */ @keyframes voidRift { 0% { opacity:0; transform:translateX(-50%) scaleX(.05) scaleY(.6); filter:blur(4px); } 18% { opacity:1; transform:translateX(-50%) scaleX(1.04) scaleY(1); filter:blur(0); } 75% { opacity:1; transform:translateX(-50%) scaleX(1) scaleY(1); } 100% { opacity:0; transform:translateX(-50%) translateY(-28px) scaleY(.8); } } @keyframes eventDrift { 0% { opacity:0; transform:translateX(-50%) translateY(10px) scale(.92); } 15% { opacity:1; transform:translateX(-50%) translateY(0) scale(1.02); } 78% { opacity:1; } 100% { opacity:0; transform:translateX(-50%) translateY(-22px) scale(.96); } } .event-message.visible { animation: eventDrift 2.3s ease-out forwards; } .event-message.event-tetris.visible { animation: voidRift 2.6s cubic-bezier(.15,.7,.3,1) forwards; } /* 4. Mensajes TETRIS: tipografía más grande y borde luminoso */ .event-message.event-tetris { font-size: clamp(1.1rem,4vw,1.8rem) !important; border-width: 2px !important; letter-spacing: .18em !important; } /* 5. Pantalla inicio: fondo con vórtice animado */ .screen-overlay::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(var(--accent-rgb),.015) 30deg, transparent 60deg, rgba(var(--accent-rgb),.008) 120deg, transparent 180deg, rgba(var(--accent-rgb),.015) 240deg, transparent 300deg, rgba(var(--accent-rgb),.008) 360deg); animation: vortexSpin 28s linear infinite; pointer-events: none; z-index: 0; border-radius: 50%; } @keyframes vortexSpin { to { transform: rotate(360deg); } } /* 6. Combo: frenético a combos altos */ @keyframes comboExplosion { 0% { transform:scale(.3); opacity:0; text-shadow:0 0 0 transparent; } 40% { transform:scale(1.5); opacity:1; text-shadow:0 0 30px rgba(255,204,0,1),0 0 60px rgba(255,204,0,.5); } 70% { transform:scale(.95); } 100% { transform:scale(1); opacity:1; } } .combo-value { animation: comboExplosion .4s cubic-bezier(.15,.7,.3,1.2) both !important; } @keyframes comboPulse { 0%,100% { text-shadow:0 0 14px rgba(255,204,0,.6); transform:scale(1); } 50% { text-shadow:0 0 30px rgba(255,204,0,1),0 0 60px rgba(255,204,0,.4); transform:scale(1.08); } } .combo-block { animation: comboPulse 1.2s ease-in-out infinite; } /* 7. Nivel: transición de color al subir + glow según peligro */ @keyframes levelBurst { 0% { color:#fff; text-shadow:0 0 40px #fff,0 0 80px var(--accent),0 0 140px var(--accent); transform:scale(1.4); } 100% { color:var(--accent); text-shadow:var(--glow-md); transform:scale(1); } } .stat-level-num.level-up-flash { animation: levelBurst .9s cubic-bezier(.2,.8,.3,1) forwards; } /* 8. Tier banner: shimmer cósmico */ .tier-banner-inner::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.06) 50%, transparent 75%); animation: tierShimmer 2.2s ease-in-out infinite; pointer-events: none; } @keyframes tierShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .tier-banner-inner { overflow: hidden; } /* 9. Estado corrupción: scanlines rojas sobre el tablero */ .game-wrapper.corrupt-active .board-section::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255,0,51,.025) 2px, rgba(255,0,51,.025) 3px); animation: corruptScan .12s linear infinite; } @keyframes corruptScan { to { background-position: 0 3px; } } /* 10. Canvas en modo speed-danger: borde rojo pulsante intenso */ @keyframes dangerPulse { 0%,100% { box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 25px rgba(255,0,51,.2),0 0 60px rgba(255,0,51,.1); } 50% { box-shadow:0 0 0 2px rgba(255,0,51,.4),0 0 40px rgba(255,0,51,.4),0 0 90px rgba(255,0,51,.2); } } .game-wrapper.speed-danger .game-canvas { animation: dangerPulse 1.2s ease-in-out infinite, voidBreath 5s ease-in-out infinite !important; } /* 11. Lore overlay: entrada dramática */ @keyframes loreReveal { 0% { opacity:0; transform:scale(.88) translateY(20px); filter:blur(8px); } 60% { filter:blur(0); } 100% { opacity:1; transform:scale(1) translateY(0); } } .lore-overlay.visible .lore-inner { animation: loreReveal .7s cubic-bezier(.15,.7,.3,1) both; } /* Efecto de niebla detrás del lore */ .lore-overlay.visible::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--accent-rgb),.06) 0%, transparent 70%); animation: loreFog 3s ease-in-out infinite alternate; pointer-events: none; } @keyframes loreFog { from { transform: scale(1); opacity: .5; } to { transform: scale(1.15); opacity: 1; } } /* 12. Achievement toast: entrada con brillo */ @keyframes achievRift { 0% { opacity:0; transform:translateX(110%) skewX(-6deg); } 12% { opacity:1; transform:translateX(-4%) skewX(2deg); } 20% { transform:translateX(0) skewX(0); } 78% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(110%); } } .achiev-toast.visible { animation: achievRift 4.2s cubic-bezier(.22,.68,0,1.1) forwards; } /* 13. Botones primarios: partícula de luz en hover */ .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); transform: translateX(-100%); transition: transform .5s ease; } .btn-primary:hover::after { transform: translateX(100%); } /* 14. Pantalla de inicio: glow en el fondo del screen card */ .screen { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.04), 0 0 60px rgba(0,0,0,.75), inset 0 1px 0 rgba(var(--accent-rgb),.07), inset 0 0 40px rgba(0,0,0,.3); } /* 15. Next queue desktop: glow en canvas seleccionado */ .preview-canvas { transition: box-shadow .4s ease, border-color .4s ease; box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 0 8px rgba(var(--accent-rgb),.08); } /* 16. Touch controls: anillo pulsante en botón rotate */ .touch-zone-right { position: relative; } .touch-zone-right::before { content: ''; position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(191,0,255,.12); animation: rotatering 3s ease-in-out infinite; pointer-events: none; } @keyframes rotatering { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.4; } 50% { transform:translate(-50%,-50%) scale(1.12); opacity:.12; } } /* 17. Score display: flash al recibir puntos (clase añadida por JS) */ @keyframes scoreFlash { 0% { color:var(--text-bright); text-shadow:var(--glow-sm); } 30% { color:#fff; text-shadow:0 0 20px #fff,0 0 40px var(--accent); } 100% { color:var(--text-bright); text-shadow:var(--glow-sm); } } .stat-big.score-flash { animation: scoreFlash .6s ease-out; } /* 18. Glitch más salvaje en game over */ .screen-title.glitch { animation: glitchWild 4s steps(1) infinite; } @keyframes glitchWild { 0%,85%,100% { clip-path:none; transform:none; } 86% { clip-path:inset(30% 0 50% 0); transform:translate(-6px,2px); color:#ff0033; } 87% { clip-path:inset(70% 0 10% 0); transform:translate(6px,-2px); color:var(--accent); } 88% { clip-path:inset(10% 0 80% 0); transform:translate(-3px,3px); } 89% { clip-path:none; transform:none; } 95% { clip-path:inset(50% 0 40% 0); transform:translate(4px,0); color:var(--accent2); } 96% { clip-path:none; transform:none; } } /* 19. XP bar: shimmer animado */ .xp-bar-fill { background: linear-gradient(90deg, var(--accent) 0%, rgba(255,255,255,.4) 45%, var(--accent) 55%, var(--accent) 100%); background-size: 200% 100%; animation: xpShimmer 2.4s linear infinite, xpGrow .6s ease both; } @keyframes xpShimmer { to { background-position: -200% 0; } } @keyframes xpGrow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } } /* 20. Mobile HUD piezas: glow suave al borde del canvas principal */ .mhud-pcanvas-next { animation: nextCanvasGlow 3s ease-in-out infinite; } @keyframes nextCanvasGlow { 0%,100% { box-shadow: inset 0 0 10px rgba(var(--accent-rgb),.12), 0 0 6px rgba(var(--accent-rgb),.08); } 50% { box-shadow: inset 0 0 14px rgba(var(--accent-rgb),.22), 0 0 12px rgba(var(--accent-rgb),.15); } } /* ════════════════════════════════════════════════════════════════ MOBILE: ajuste de canvas para nueva altura del HUD con piezas ════════════════════════════════════════════════════════════════ */ @media (max-width:600px) { /* El mobile-hud ahora tiene ~90px de altura total */ .board-section { padding-bottom: 0; } /* Sin mhud-next-cell ya — era el antiguo slot único de next */ .mhud-next-cell { display: none; } /* Fuente score un poco más pequeña para caber */ .mhud-score { font-size: 0.7rem !important; } } /* ═══════════════════════════════════════════════════════════════ NUEVAS FEATURES — v4.0 1. Attract canvas (demo IA) 2. Streak badge 3. Share button ═══════════════════════════════════════════════════════════════ */ /* 1. Attract canvas — mini Tetris IA en pantalla de inicio */ #screen-start { position: relative; overflow: hidden; } .attract-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; opacity: 0.14; z-index: 0; border-radius: inherit; } #screen-start > *:not(.attract-canvas) { position: relative; z-index: 1; } /* 2. Streak badge */ .streak-badge { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.07em; color: #ffcc00; padding: 0.2em 0.8em; border: 1px solid rgba(255,204,0,0.22); border-radius: 20px; background: rgba(255,204,0,0.06); animation: streakPulse 2.4s ease-in-out infinite alternate; } @keyframes streakPulse { from { box-shadow: 0 0 4px rgba(255,204,0,0.1); } to { box-shadow: 0 0 14px rgba(255,204,0,0.35), 0 0 2px rgba(255,204,0,0.6) inset; } } /* 3. Share button */ .btn-share { display: block; width: 100%; margin-top: 0.5em; padding: 0.55em 1em; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--accent2, #bf00ff); background: rgba(191,0,255,0.07); border: 1px solid rgba(191,0,255,0.28); border-radius: 6px; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .1s ease; } .btn-share:hover, .btn-share:focus { background: rgba(191,0,255,0.14); box-shadow: 0 0 18px rgba(191,0,255,0.22); outline: none; } .btn-share:active { transform: scale(0.98); }