/*
╔══════════════════════════════════════════════════════════════════════════════╗
║  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(15px, min(1vw + 14px, 1.6vh + 9px), 21px);   /* mira ancho Y alto: en el recuadro horizontal de los portales (960x540) no puede crecer como en un monitor. El + necesita espacios o la regla se ignora */
  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:.75rem;
  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:.75rem; 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(1.4rem,7vw,3.6rem); font-weight:900; letter-spacing:.04em; line-height:1; user-select:none; max-width:100%; }
.logo-eldritch  { color:var(--accent);  animation:glowPulse  3.2s ease-in-out infinite; display:inline-block; }
.logo-blocks { 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:flex-start; padding:4px 0; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.skin-row::-webkit-scrollbar { display:none; }
.skin-row .skin-btn { scroll-snap-align:start; flex-shrink:0; }
.skin-btn {
  font-family:var(--font-display); font-size:.75rem; 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:.75rem; 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:.75rem; 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:.75rem; }
.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:.75rem; 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:.75rem; color:var(--text-bright); display:block; letter-spacing:.1em; margin-bottom:3px; }
.tutorial-item p { font-size:.75rem; 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:.75rem; 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:.75rem; color:var(--text-bright); letter-spacing:.1em; }
.achiev-desc-sm { font-size:.75rem; 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:.75rem; 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:.75rem; color:var(--text-dim); margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   6. LAYOUT PRINCIPAL
   ════════════════════════════════════════════════════════════════ */
.game-wrapper {
  position:relative; z-index:10; display:grid;
  grid-template-columns:minmax(110px,8.5rem) auto minmax(110px,8.5rem);   /* crecen con la letra: a 110px fijos el contenido se salía */
  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:.75rem; 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:.75rem; 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:.75rem; 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:.75rem; 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:.75rem; 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:.75rem; 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:.75rem; color:var(--text-dim); margin-top:2px; display:block; }

.toggle-btn {
  font-family:var(--font-display); font-size:.75rem; 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:.75rem; }

/* ════════════════════════════════════════════════════════════════
   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:.75rem;
  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:.75rem;
  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:.75rem;
  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:.75rem; 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:.75rem;
  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:.75rem;
  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:.75rem;
  color: rgba(var(--accent-rgb),0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

.mhud-blitz {
  font-family: var(--font-display);
  font-size:.75rem;
  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:not([hidden]) { display: flex !important; }
}

/* El atributo hidden manda siempre: si no se está jugando, estos controles
   no deben ocupar espacio ni taparle al jugador el menú o los récords. */
.touch-controls[hidden] { display: none !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 {
  /* 44 px es el mínimo cómodo para el pulgar en móvil. */
  min-width: 44px; min-height: 44px;
  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; }
  .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:minmax(90px,7rem) auto minmax(90px,7rem); 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:minmax(110px,9rem) auto minmax(110px,9rem); gap:8px; }
  .touch-controls { display:none; }
}

/* ── Desktop (≥1201px) ── */
@media (min-width:1201px){
  .game-wrapper { grid-template-columns:minmax(130px,8.5rem) auto minmax(130px,8.5rem); 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:.75rem; }
  .tier-name { font-size:.75rem; }
}

/* ── iPad / tablet 768-1024px ── */
@media (min-width:768px) and (max-width:1024px) and (min-height:600px) {
  .game-wrapper { grid-template-columns: minmax(100px,7.5rem) auto minmax(100px,7.5rem); 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: minmax(150px,9rem) auto minmax(150px,9rem); 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:.75rem !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:.75rem; 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:.75rem; 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-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;
}
/* Las cajitas miden 60px fijos desde JS; si la columna es más estrecha,
   encogen en vez de salirse por el borde. */
.next-queue-row canvas { max-width:calc(50% - 2px); height:auto !important; aspect-ratio:1; }
.panel .volume-hud { min-width:0; max-width:100%; }
.panel .volume-hud input[type="range"] { min-width:0; width:100%; flex:1 1 auto; }
.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:.75rem; 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:.75rem; 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:.75rem; 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:.75rem;
  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:.75rem;
  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-eldritch  { animation: cosmicLogo  3.2s ease-in-out infinite; }
.logo-blocks { 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-x: 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;
}
/* Los hijos reales del menú van por encima del fondo.
   Los canvas decorativos (attract, tentáculos) y los anillos quedan FUERA:
   si este selector les impone position:relative pasan a ocupar sitio en el
   flujo y empujan el logo y el botón JUGAR fuera de pantalla. */
#screen-start > *:not(.attract-canvas):not(.tentacles-canvas):not(.void-rings) {
  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); }

/* ════════════════════════════════════════════════════════════════
   TANDA A — Nuevas features v5.0
   1. B2B indicator
   2. Finesse meter
   3. (retirado)
   ════════════════════════════════════════════════════════════════ */

/* 1. B2B block */
.b2b-block {
  border-color: rgba(0,229,255,0.22);
  background: rgba(0,229,255,0.04);
  border-radius: 4px; padding: 6px;
}
.b2b-value {
  color: #00e5ff !important;
  text-shadow: 0 0 14px rgba(0,229,255,0.7) !important;
  font-size: 1.3rem !important;
}
@keyframes b2bFlash {
  0%   { transform:scale(1.6); opacity:0; }
  35%  { transform:scale(1.15); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
.b2b-flash { animation: b2bFlash 0.42s cubic-bezier(.15,.7,.3,1.2) both; }

/* 2. Finesse meter en game over */
.finesse-result {
  width: 100%; padding: 8px 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--border-dim); border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  animation: slideUpFade .5s .50s both;
}
.finesse-label {
  font-family: var(--font-display); font-size:.75rem;
  color: var(--text-dim); letter-spacing: .16em;
}
.finesse-perfect {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: #00ff6a; text-shadow: 0 0 8px rgba(0,255,106,0.6); letter-spacing: .1em;
}
.finesse-good {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: #ffcc00; text-shadow: 0 0 8px rgba(255,204,0,0.5); letter-spacing: .1em;
}
.finesse-bad {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: #ff5050; letter-spacing: .1em;
}
.finesse-stats {
  font-family: var(--font-mono); font-size:.75rem; color: var(--text-dim);
}

/* ── Opener Tutorial ── */
.btn-openers-link { margin-top: 10px; width: 100%; font-size: .75rem; border-color: rgba(191,0,255,0.35); color: rgba(191,0,255,0.85); }
.btn-openers-link:hover { border-color: #bf00ff; color: #bf00ff; background: rgba(191,0,255,0.07); }

.opener-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.opener-tab {
  font-family: var(--font-display); font-size:.75rem; letter-spacing: .1em;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
  background: rgba(0,0,0,0.3); color: var(--text-dim); cursor: pointer; transition: all .2s;
  border-color: var(--tab-color, rgba(255,255,255,0.15));
}
.opener-tab.active, .opener-tab:hover { color: var(--tab-color, #fff); background: rgba(255,255,255,0.06); opacity: 1; }
.opener-tab.active { font-weight: 700; border-width: 1.5px; }

.opener-name-title {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .18em;
  margin: 0 0 4px; text-align: center; transition: color .4s;
}
.opener-main-desc { font-size:.75rem; color: var(--text-dim); text-align: center; margin: 0 0 10px; line-height: 1.4; }

.opener-canvas {
  display: block; width: 220px; height: 180px; margin: 0 auto 8px;
  border: 1px solid rgba(0,255,106,0.12); border-radius: 4px;
  image-rendering: pixelated; background: #04040a;
}

.opener-step-label {
  font-family: var(--font-display); font-size:.75rem; letter-spacing: .1em;
  color: var(--text-dim); text-align: center; margin: 0 0 8px; min-height: 1.2em;
}

.opener-nav-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.opener-page { font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); min-width: 30px; text-align: center; }
.btn-icon-sm {
  font-family: var(--font-display); font-size:.75rem; padding: 5px 10px;
  border: 1px solid rgba(0,255,106,0.25); border-radius: 3px;
  background: rgba(0,0,0,0.3); color: var(--text-dim); cursor: pointer; transition: all .15s;
}
.btn-icon-sm:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,255,106,0.06); }

/* ── Replay ── */
.replay-section { margin: 12px 0 8px; border-top: 1px solid var(--border-dim); padding-top: 12px; }
.replay-label { margin-bottom: 6px; }
.replay-info-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-display); font-size:.75rem; letter-spacing: .1em;
  color: var(--text-dim); margin-bottom: 8px;
}
.rp-score { color: var(--accent); font-weight: 700; }
.rp-mode  { color: rgba(191,0,255,0.9); }

.replay-canvas {
  display: block; width: 150px; height: 280px; margin: 0 auto;
  border: 1px solid rgba(0,255,106,0.12); border-radius: 4px;
  image-rendering: pixelated; background: #04040a;
}

/* ── Tanda B: Mission Chest ── */
.mission-chest {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 350; display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; pointer-events: none; opacity: 0;
  background: rgba(4,4,14,0.96);
  border: 1px solid rgba(255,204,0,0.5);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(255,204,0,0.3), 0 0 80px rgba(255,204,0,0.1);
}
.mission-chest.visible { animation: chestPop 3.4s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes chestPop {
  0%   { opacity:0; transform:translate(-50%,-60%) scale(.7); }
  8%   { opacity:1; transform:translate(-50%,-50%) scale(1.07); }
  14%  { transform:translate(-50%,-50%) scale(.97); }
  18%  { transform:translate(-50%,-50%) scale(1); }
  72%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-56%) scale(.93); }
}
.chest-icon-big { font-size: 2.2rem; filter: drop-shadow(0 0 8px rgba(255,204,0,0.8)); animation: chestBounce 0.5s 0.3s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes chestBounce { 0%{transform:scale(.5) rotate(-15deg);} 100%{transform:scale(1.15) rotate(0deg);} }
.chest-label { font-family:var(--font-display); font-size:.75rem; letter-spacing:.2em; color:rgba(255,204,0,0.7); margin-bottom:3px; }
.chest-mission-desc { font-family:var(--font-display); font-size:.75rem; color:rgba(255,255,255,0.8); margin-bottom:5px; }
.chest-xp {
  font-family:var(--font-display); font-size:1.15rem; font-weight:900;
  color:#ffcc00; text-shadow:0 0 12px rgba(255,204,0,0.9); letter-spacing:.1em;
  animation: xpPop 3.4s ease forwards;
}
@keyframes xpPop {
  0%  { transform:translateY(0) scale(.8); opacity:0; }
  15% { transform:translateY(-4px) scale(1.15); opacity:1; }
  25% { transform:translateY(0) scale(1); }
  72% { opacity:1; }
  100%{ opacity:0; transform:translateY(-10px); }
}

/* ── Tanda B: Season indicator ── */
.season-indicator { display:flex; flex-direction:column; align-items:center; gap:4px; margin:5px 0 8px; }
.season-badge-txt { font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em; transition:color .5s; }
.season-bar-wrap  { width:180px; height:3px; background:rgba(255,255,255,0.09); border-radius:2px; overflow:hidden; }
.season-bar       { height:100%; border-radius:2px; transition:width .6s ease; }
.season-txt       { font-family:var(--font-mono); font-size:.75rem; }

/* ── Tanda B: Secret achievements ── */
.achiev-item.secret-locked { border-color:rgba(191,0,255,0.2) !important; }
.achiev-item.secret-locked .achiev-icon-sm { color:rgba(191,0,255,0.4); }
.achiev-item.secret-locked .achiev-title-sm { color:rgba(191,0,255,0.6); }
.achiev-toast.secret-reveal {
  border-color:rgba(191,0,255,0.65) !important;
  box-shadow:0 0 50px rgba(191,0,255,0.5), 0 0 100px rgba(191,0,255,0.2) !important;
}
.achiev-toast.secret-reveal .achiev-label { color:#bf00ff !important; letter-spacing:.18em; }
.achiev-toast.secret-reveal .achiev-icon-big { animation:secretPop 0.6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes secretPop { 0%{transform:scale(0) rotate(-180deg);opacity:0;} 100%{transform:scale(1) rotate(0);opacity:1;} }

/* ── Tanda B: Tier banner enhancements ── */
.tier-trophy {
  font-size:2rem; display:block; margin-bottom:4px;
  filter:drop-shadow(0 0 10px currentColor);
  animation:trophyPulse 1.2s ease-in-out infinite alternate;
}
@keyframes trophyPulse { 0%{transform:scale(1);} 100%{transform:scale(1.15);} }
.tier-banner-lore {
  font-family:var(--font-display); font-size:.75rem; letter-spacing:.06em;
  font-style:italic; opacity:.6; margin-top:8px;
}

/* ── Tanda C: Feature 12 — Tier banner fullscreen ── */
.tier-banner {
  position:fixed !important;
  top:0 !important; left:0 !important;
  width:100vw !important; height:100vh !important;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:1200;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
  opacity:0; transition:opacity .3s;
}
.tier-banner.visible { opacity:1; animation:none; }
.tier-banner-inner {
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:40px 60px;
  border:2px solid currentColor;
  border-radius:4px;
  background:rgba(0,0,0,0.6);
  animation:tierBannerIn .5s cubic-bezier(.17,.67,.3,1.4) both;
}
@keyframes tierBannerIn {
  0%  { transform:scale(.7); opacity:0; }
  100%{ transform:scale(1);  opacity:1; }
}
.tier-banner-label { font-size:.75rem; letter-spacing:.2em; opacity:.5; }
.tier-banner-name  { font-size:2.2rem; letter-spacing:.15em; font-weight:700; }
.tier-banner-level { font-size:.85rem; letter-spacing:.12em; opacity:.7; }
.tier-trophy       { font-size:3.2rem; filter:drop-shadow(0 0 18px currentColor); }

/* ── Tanda C: Feature 13 — Combo color classes ── */
.combo-value { transition:color .15s, text-shadow .15s; }
@keyframes comboPop {
  0%  { transform:scale(1); }
  40% { transform:scale(1.6) rotate(-4deg); }
  100%{ transform:scale(1); }
}
.combo-pop { animation:comboPop .3s cubic-bezier(.17,.67,.3,1.4) both; }
.combo-3  { color:#00ff6a !important; text-shadow:0 0 20px #00ff6a; }
.combo-5  { color:#ffcc00 !important; text-shadow:0 0 24px #ffcc00; }
.combo-7  { color:#ff8800 !important; text-shadow:0 0 28px #ff8800; }
.combo-10 { color:#ff1100 !important; text-shadow:0 0 34px #ff1100, 0 0 60px #ff1100; }
@keyframes comboFire {
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.8) saturate(1.5); }
}
.combo-block.combo-max { animation:comboFire .4s ease-in-out infinite; }

/* ── Tanda C: Feature 17 — MC-style popup ── */
.mc-popup {
  position:fixed;
  /* --touch-h la fija syncTouchControls() con la altura real de los controles
     táctiles: así el aviso de logro se coloca encima y no los tapa. */
  bottom:calc(var(--touch-h, 0px) + 22px); left:50%; transform:translateX(-50%) translateY(30px);
  z-index:1300;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.17,.67,.3,1.3);
  min-width:260px; max-width:90vw;
}
.mc-popup.visible {
  opacity:1; transform:translateX(-50%) translateY(0);
}
.mc-popup-inner {
  background:rgba(0,0,0,0.88);
  border:2px solid rgba(255,255,255,0.2);
  border-top:3px solid #00ff6a;
  padding:10px 14px 12px;
  font-family:var(--font-display);
}
.mc-header {
  font-size:.75rem; letter-spacing:.18em; color:#00ff6a;
  text-transform:uppercase; margin-bottom:8px; opacity:.8;
}
.mc-body  { display:flex; align-items:center; gap:12px; }
.mc-icon  { font-size:1.6rem; flex-shrink:0; }
.mc-text  { display:flex; flex-direction:column; gap:2px; }
.mc-name  { font-size:.78rem; letter-spacing:.08em; color:#fff; font-weight:700; }
.mc-desc  { font-size:.75rem; letter-spacing:.05em; color:rgba(255,255,255,.55); }

/* ── Tanda C: Feature 18 — GD progress bar ── */
.progress-bar { position:relative; overflow:visible; }
.progress-pct {
  position:absolute; right:2px; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.08em; color:rgba(255,255,255,.3);
  pointer-events:none; white-space:nowrap;
  transition:color .3s;
}
.progress-pct.progress-full {
  animation:pctPulse .6s ease-in-out infinite alternate;
}
@keyframes pctPulse {
  0%  { opacity:.7; transform:translateY(-50%) scale(1); }
  100%{ opacity:1;  transform:translateY(-50%) scale(1.15); }
}
@keyframes progressBurst {
  0%  { box-shadow:0 0 0px transparent; opacity:1; }
  50% { box-shadow:0 0 18px 6px currentColor; opacity:1; }
  100%{ box-shadow:0 0 0px transparent; opacity:1; }
}
.progress-fill.progress-burst {
  animation:progressBurst .7s ease-out forwards;
}

/* ── Tanda D: Feature 19 — Challenge URL ── */
.challenge-banner {
  background:linear-gradient(90deg,rgba(255,170,0,0.15),rgba(255,170,0,0.08));
  border:1px solid rgba(255,170,0,0.5);
  border-radius:3px;
  color:#ffaa00;
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:.1em;
  padding:6px 12px;
  text-align:center;
  margin:4px 0;
  text-shadow:0 0 10px #ffaa0088;
}
.challenge-result {
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:.08em;
  text-align:center;
  padding:6px 12px;
  border-radius:3px;
  margin:4px 0;
}
.challenge-result.challenge-won {
  color:#00ff6a; border:1px solid rgba(0,255,106,0.4);
  background:rgba(0,255,106,0.08);
  text-shadow:0 0 12px #00ff6a88;
}
.challenge-result.challenge-lost {
  color:#ff4444; border:1px solid rgba(255,68,68,0.4);
  background:rgba(255,68,68,0.08);
}
.btn-challenge {
  display:block; width:100%; margin-top:6px;
  padding:10px; border:1px solid #ffaa00;
  background:rgba(255,170,0,0.1);
  color:#ffaa00; font-family:var(--font-display);
  font-size:.75rem; letter-spacing:.12em;
  cursor:pointer; border-radius:2px;
  transition:background .2s, box-shadow .2s;
}
.btn-challenge:hover { background:rgba(255,170,0,0.2); box-shadow:0 0 18px #ffaa0055; }

/* ── Tanda D: Feature 21 — Daily players ── */
.daily-players {
  font-family:var(--font-display);
  font-size:.75rem; letter-spacing:.1em;
  color:rgba(255,255,255,.35);
  text-align:center; margin:2px 0;
}

/* ── Tanda D: Feature 22 — Modo espectador ── */
.screen-spectator {
  display:flex; flex-direction:column;
  align-items:center; gap:12px;
  padding:16px 8px 20px;
}
.spec-title { margin-bottom:0; }
.spec-canvas {
  width:200px; height:400px;
  border:1px solid rgba(0,255,106,0.25);
  box-shadow:0 0 30px rgba(0,255,106,0.1);
  background:#000;
}
.spec-btn { margin-top:4px; }
@media(max-width:480px){
  .spec-canvas { width:160px; height:320px; }
}

/* ══════════════════════════════════════════════
   TANDA E — Misiones 3 niveles
   ══════════════════════════════════════════════ */
.mission-section { margin-bottom:14px; }
.mission-section-hd {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.2em; color:var(--mc,#00ff6a);
  border-bottom:1px solid var(--mc,#00ff6a); padding-bottom:4px;
  margin-bottom:8px; opacity:.85;
}
.mission-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; margin-bottom:6px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:3px; transition:opacity .3s;
}
.mission-item.mission-done { opacity:.45; }
.mission-tier-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.mission-body { flex:1; min-width:0; }
.mission-desc { font-size:.75rem; letter-spacing:.04em; color:#ddd; margin-bottom:4px; }
.mission-progress { height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.mission-bar { height:100%; border-radius:2px; transition:width .5s ease; }
.mission-xp { font-family:var(--font-display); font-size:.75rem; letter-spacing:.06em; color:#aaa; text-align:right; flex-shrink:0; line-height:1.3; }

/* ══════════════════════════════════════════════
   TANDA E — Títulos equipables
   ══════════════════════════════════════════════ */
.title-picker {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:4px 0 12px; justify-content:flex-start;
}
.title-option {
  padding:5px 10px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.6);
  font-family:var(--font-display); font-size:.75rem; letter-spacing:.06em;
  border-radius:2px; cursor:pointer; transition:all .2s;
}
.title-option:hover { border-color:#00ff6a; color:#00ff6a; }
.title-option.active { border-color:#00ff6a; background:rgba(0,255,106,.12); color:#00ff6a; }

/* ══════════════════════════════════════════════
   TANDA E — Streak freeze badge
   ══════════════════════════════════════════════ */
.streak-badge.freeze-gained { animation:freezeGain .6s ease; }
.streak-badge.freeze-used   { animation:freezeUse .6s ease; }
@keyframes freezeGain {
  0%,100%{ box-shadow:none; }
  50% { box-shadow:0 0 20px #00aaff, 0 0 40px #00aaff44; }
}
@keyframes freezeUse {
  0%,100%{ opacity:1; }
  50% { opacity:.4; filter:grayscale(1); }
}

/* ══════════════════════════════════════════════════════
   TANDA G — Rediseño pantalla de inicio
   ══════════════════════════════════════════════════════ */

/* Canvas de tentáculos de fondo */
.tentacles-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
  opacity:.7;
}

/* Contenedor principal — override para screen-start */
.screen-start {
  justify-content:flex-start;
  padding:14px 12px 10px;
  gap:0;
  overflow-y:auto;
  max-width:880px;
  min-width:0;
}

/* Logo con glitch en hover */
.game-logo {
  cursor:default;
  position:relative;
  z-index:2;
  margin-bottom:2px;
}
@keyframes logoGlitch {
  0%,90%,100%{ transform:none; filter:none; }
  91%{ transform:translate(-3px,1px) skewX(-2deg); filter:hue-rotate(90deg); }
  92%{ transform:translate(3px,-1px) skewX(2deg);  filter:hue-rotate(-90deg); }
  93%{ transform:translate(-2px,2px); clip-path:polygon(0 30%,100% 30%,100% 60%,0 60%); }
  94%{ clip-path:none; transform:none; }
}
.game-logo { animation:logoGlitch 9s steps(1) infinite; }

/* 3-zona grid */
.start-grid {
  display:grid;
  grid-template-columns:200px 1fr 160px;
  gap:14px;
  width:100%; max-width:820px; min-width:0;
  z-index:2;
  margin-top:8px;
  align-items:start;
}
.start-grid > * { min-width:0; }

/* ─── Player Card ─── */
.player-card {
  background:rgba(4,4,14,0.82);
  border:1px solid rgba(var(--accent-rgb),0.25);
  border-radius:6px;
  padding:14px 12px;
  display:flex; flex-direction:column; gap:8px;
  backdrop-filter:blur(6px);
  box-shadow:0 0 30px rgba(var(--accent-rgb),0.06), inset 0 1px 0 rgba(var(--accent-rgb),0.08);
  animation:slideUpFade .5s .1s both;
}
.pc-alias {
  font-family:var(--font-display); font-size:.9rem;
  letter-spacing:.1em; color:#fff; font-weight:700;
}
.pc-title-badge {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.1em; color:var(--accent); opacity:.8;
  min-height:14px;
}
.pc-tier-row {
  display:flex; align-items:center; gap:8px;
}
.pc-trophy {
  font-size:1.5rem;
  filter:drop-shadow(0 0 8px currentColor);
}
.pc-tier-info { display:flex; flex-direction:column; gap:1px; }
.pc-tier-name {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.1em; font-weight:700;
}
.pc-level {
  font-family:var(--font-mono); font-size:.75rem;
  color:rgba(255,255,255,.5); letter-spacing:.06em;
}
.pc-xp-row {
  display:flex; align-items:center; gap:6px;
}
.pc-xp-bar-wrap {
  flex:1; height:4px; background:rgba(255,255,255,.1);
  border-radius:2px; overflow:hidden;
}
.pc-xp-bar-inner {
  height:100%; background:var(--accent);
  border-radius:2px; transition:width .6s ease;
  box-shadow:0 0 6px var(--accent);
}
.pc-xp-label {
  font-family:var(--font-mono); font-size:.75rem;
  color:rgba(255,255,255,.4); white-space:nowrap;
}
.pc-badges-row {
  display:flex; gap:6px; flex-wrap:wrap;
}
.pc-badge {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.06em; padding:2px 6px;
  border-radius:2px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.6);
}
.pc-badge-fire { border-color:rgba(255,150,0,.3); color:#ff9600; }
.pc-badge-missions { border-color:rgba(0,255,106,.2); color:#00ff6a; }
.pc-divider {
  height:1px; background:rgba(255,255,255,.08); margin:2px 0;
}

/* ─── Centro ─── */
.start-center {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:slideUpFade .45s .15s both;
  min-width:0; width:100%;
}
.btn-play-main {
  width:100%; font-size:1rem !important;
  padding:14px 0 !important; letter-spacing:.2em !important;
  box-shadow:0 0 30px rgba(var(--accent-rgb),.3), 0 0 60px rgba(var(--accent-rgb),.1) !important;
}
.start-modes-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:100%; min-width:0;
}
.btn-mode {
  padding:7px 4px; font-family:var(--font-display);
  font-size:.75rem; letter-spacing:.05em;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7); cursor:pointer; border-radius:2px;
  transition:all .2s;
}
.btn-mode:hover { background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.4); color:var(--accent); }
.start-nav-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:5px; width:100%; min-width:0;
}
.btn-nav, .btn-mode { min-width:0; overflow-wrap:break-word; }
.btn-nav {
  padding:7px 6px; font-family:var(--font-display);
  font-size:.75rem; letter-spacing:.07em; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.6); cursor:pointer; border-radius:2px;
  transition:all .2s;
}
.btn-nav:hover { background:rgba(var(--accent-rgb),.1); border-color:rgba(var(--accent-rgb),.3); color:var(--accent); }

/* ─── Derecha ─── */
.start-right {
  display:flex; flex-direction:column; gap:10px;
  animation:slideUpFade .45s .2s both;
}
.start-right .quick-instructions {
  font-size:.75rem; gap:3px;
}
.start-right .tier-preview-row { justify-content:flex-start; }
.start-right .season-indicator  { display:none; }

/* ─── Responsive: ≤820px → 1 columna (el grid de 3 col necesita ~670px reales) ─── */
@media(max-width:820px){
  .start-grid {
    grid-template-columns:1fr;
    gap:10px;
  }
  .start-right { order:3; }
  .player-card { order:2; }
  .start-center { order:1; }
  .start-right .quick-instructions { display:none; }
  .start-right .tier-preview-row { display:none; }
}
@media(max-width:480px){
  .start-modes-row { grid-template-columns:repeat(2,1fr); }
  .start-nav-grid  { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════
   TANDA F — Liga · Battle Pass · Ruleta · Huevo Lovecraftiano
   ══════════════════════════════════════════════════════════════ */

/* Skin vars: Dorado */
[data-skin="golden"] {
  --accent:#ffd700; --accent2:#ff8800; --accent-rgb:255,215,0;
  --bg-void:#080500; --bg-panel:rgba(12,8,0,0.88);
  --border-dim:rgba(255,200,0,.10); --border-act:rgba(255,200,0,.45);
  --text-dim:rgba(255,200,0,.38); --text-bright:#ffd700;
  --glow-sm:0 0 8px rgba(255,215,0,.55),0 0 20px rgba(255,215,0,.15);
  --glow-md:0 0 14px rgba(255,215,0,.65),0 0 40px rgba(255,215,0,.20);
}
/* Skin vars: El Elegido */
[data-skin="elegido"] {
  --accent:#00ffcc; --accent2:#ff00ff; --accent-rgb:0,255,204;
  --bg-void:#000000; --bg-panel:rgba(0,8,6,0.90);
  --border-dim:rgba(0,255,200,.09); --border-act:rgba(0,255,200,.40);
  --text-dim:rgba(0,255,200,.35); --text-bright:#00ffcc;
  --glow-sm:0 0 8px rgba(0,255,204,.55),0 0 20px rgba(0,255,204,.15);
  --glow-md:0 0 14px rgba(0,255,204,.65),0 0 40px rgba(0,255,204,.20);
}
[data-skin="matrix"] {
  --accent:#00ff00; --accent2:#00cc00; --accent-rgb:0,255,0;
  --bg-void:#000a00; --bg-panel:rgba(0,10,0,0.90);
  --border-dim:rgba(0,200,0,.09); --border-act:rgba(0,200,0,.40);
  --text-dim:rgba(0,180,0,.40); --text-bright:#00ff00;
  --glow-sm:0 0 8px rgba(0,255,0,.55),0 0 20px rgba(0,255,0,.15);
  --glow-md:0 0 14px rgba(0,255,0,.65),0 0 40px rgba(0,255,0,.20);
}
[data-skin="sangre"] {
  --accent:#cc0000; --accent2:#880000; --accent-rgb:204,0,0;
  --bg-void:#050001; --bg-panel:rgba(8,0,2,0.90);
  --border-dim:rgba(180,0,0,.10); --border-act:rgba(180,0,0,.45);
  --text-dim:rgba(180,0,0,.40); --text-bright:#cc0000;
  --glow-sm:0 0 8px rgba(204,0,0,.55),0 0 20px rgba(204,0,0,.15);
  --glow-md:0 0 14px rgba(204,0,0,.65),0 0 40px rgba(204,0,0,.20);
}

/* ── Player card: badges extra ── */
.pc-badge-league { border-color:rgba(255,215,0,.3); color:#ffd700; font-weight:bold; }
.pc-badge-egg    { border-color:rgba(191,0,255,.3); color:#bf00ff; cursor:pointer; }
.pc-badge-egg.egg-ready { animation:eggPulse 1s ease-in-out infinite; border-color:#bf00ff; }
@keyframes eggPulse {
  0%,100%{ box-shadow:0 0 4px rgba(191,0,255,.3); }
  50%    { box-shadow:0 0 12px rgba(191,0,255,.9); }
}

/* ── Liga semanal — pantalla ── */
.league-hero { display:flex; align-items:center; gap:12px; justify-content:center; margin:16px 0; }
.league-big-icon { font-size:2.8rem; }
.league-big-name { font-family:var(--font-display); font-size:1.4rem; letter-spacing:.1em; }
.league-xp-info  { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.6); margin-bottom:6px; }
.league-bar-wrap { height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin-bottom:16px; }
.league-bar-fill { height:100%; border-radius:3px; transition:width .6s ease; }
.league-tiers-list { display:flex; flex-direction:column; gap:6px; max-width:380px; margin:0 auto; }
.league-tier-row  { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid rgba(255,255,255,.08); border-radius:4px; }
.league-tier-row.ltr-active { background:rgba(255,255,255,.05); border-width:1.5px; }
.ltr-icon  { font-size:1.2rem; width:28px; text-align:center; }
.ltr-name  { flex:1; font-family:var(--font-display); font-size:.75rem; letter-spacing:.08em; }
.ltr-req   { font-family:var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.4); }
.ltr-max   { color:gold !important; }

/* ── Liga popup (toast) ── */
.league-popup {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(8,8,16,.96); border:2px solid gold;
  padding:20px 36px; border-radius:8px; z-index:9998;
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-size:1.1rem; letter-spacing:.12em;
  box-shadow:0 0 40px rgba(255,215,0,.3);
  animation:leaguePop .4s cubic-bezier(.2,1.4,.5,1) both;
}
.league-popup.lp-down { border-color:rgba(255,60,0,.8); box-shadow:0 0 30px rgba(255,60,0,.25); }
.lp-icon { font-size:2rem; }
.lp-txt  { color:#fff; }
@keyframes leaguePop {
  from{ opacity:0; transform:translate(-50%,-50%) scale(.7); }
  to  { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* ── Battle Pass ── */
.bp-header { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:8px; }
.bp-bar-wrap { height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin:4px 0 4px; }
.bp-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:3px; transition:width .6s ease; }
.bp-bar-txt  { font-family:var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.5); text-align:center; margin-bottom:10px; }
.bp-rail {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  overflow-y:auto; max-height:55vh; padding:4px 2px;
}
.bp-node {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; border:1px solid rgba(255,255,255,.1); border-radius:6px;
  background:rgba(255,255,255,.02); text-align:center;
  opacity:.55; transition:all .2s;
}
.bp-node.bp-un   { opacity:1; border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.05); }
.bp-node.bp-cl   { opacity:.7; background:rgba(0,255,106,.06); border-color:rgba(0,255,106,.2); }
.bp-lv  { font-family:var(--font-display); font-size:.75rem; color:rgba(255,255,255,.4); }
.bp-ic  { font-size:1.4rem; }
.bp-lb  { font-family:var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.6); line-height:1.3; }
.bp-btn {
  margin-top:2px; padding:3px 8px; font-size:.75rem; font-family:var(--font-display);
  letter-spacing:.06em; background:var(--accent); color:#000; border:none;
  border-radius:2px; cursor:pointer; transition:all .15s;
}
.bp-btn:hover { filter:brightness(1.2); }
.bp-done { font-size:.85rem; color:#00ff6a; }

/* BP toast */
.bp-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(8,8,16,.95); border:1px solid var(--accent);
  padding:10px 20px; border-radius:4px; z-index:9990;
  font-family:var(--font-display); font-size:.75rem; letter-spacing:.08em;
  box-shadow:0 0 20px rgba(var(--accent-rgb),.2);
  animation:bpToastIn .3s ease both;
}
.bp-toast-txt { color:#fff; }
@keyframes bpToastIn {
  from{ opacity:0; transform:translateX(-50%) translateY(16px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── Ruleta diaria ── */
.roulette-overlay {
  position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
}
.roulette-inner {
  background:rgba(6,6,18,.97); border:1px solid var(--accent);
  border-radius:10px; padding:24px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 0 60px rgba(var(--accent-rgb),.15);
  max-width:380px; width:90%;
}
.roulette-title    { font-family:var(--font-display); font-size:1rem; letter-spacing:.15em; color:var(--accent); }
.roulette-subtitle { font-family:var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.4); text-align:center; }
.roulette-canvas   { border-radius:50%; box-shadow:0 0 24px rgba(var(--accent-rgb),.2); }
.roulette-result {
  display:flex; align-items:center; gap:10px;
  background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.3);
  padding:10px 18px; border-radius:4px;
  animation:rlResult .4s ease both;
}
@keyframes rlResult {
  from{ opacity:0; transform:scale(.8); }
  to  { opacity:1; transform:scale(1); }
}
.rl-r-icon { font-size:1.6rem; }
.rl-r-txt  { font-family:var(--font-display); font-size:.75rem; letter-spacing:.08em; color:#fff; }

/* ── Huevo Lovecraftiano ── */
.egg-overlay {
  position:fixed; inset:0; z-index:9600;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
}
.egg-inner {
  background:rgba(6,6,18,.98); border:1px solid #bf00ff;
  border-radius:12px; padding:30px 28px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 0 80px rgba(191,0,255,.25); max-width:340px; width:90%;
}
.egg-title   { font-family:var(--font-display); font-size:1rem; letter-spacing:.15em; color:#bf00ff; }
.egg-visual  { font-size:4rem; min-height:80px; display:flex; align-items:center; justify-content:center; }
.egg-emoji   { display:block; }
@keyframes eggShake {
  0%,100%{ transform:rotate(0deg) scale(1); }
  20%    { transform:rotate(-8deg) scale(1.05); }
  40%    { transform:rotate(8deg) scale(1.08); }
  60%    { transform:rotate(-5deg) scale(1.1); }
  80%    { transform:rotate(5deg) scale(1.05); }
}
.egg-overlay.egg-cracking .egg-emoji { animation:eggShake .4s ease-in-out infinite; }
@keyframes eggHatch {
  from{ opacity:0; transform:scale(0); }
  60% { transform:scale(1.3); }
  to  { opacity:1; transform:scale(1); }
}
.egg-overlay.egg-hatching .egg-visual { animation:eggHatch .5s cubic-bezier(.2,1.4,.4,1) both; }
.egg-reward {
  display:flex; align-items:center; gap:12px;
  background:rgba(191,0,255,.1); border:1px solid rgba(191,0,255,.4);
  padding:12px 20px; border-radius:6px;
  animation:rlResult .5s ease both;
}
.egg-r-icon { font-size:1.8rem; }
.egg-r-txt  { font-family:var(--font-display); font-size:.75rem; letter-spacing:.08em; color:#fff; }

/* ── Responsive BP ── */
@media(max-width:500px){
  .bp-rail { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:360px){
  .roulette-inner { padding:16px 12px; gap:8px; }
}

/* ══════════════════════════════════════════════════════════════════
   TANDA H — Boss Fights · Prestige
   ══════════════════════════════════════════════════════════════════ */


/* ── Boss Warning Overlay ── */
.boss-warning {
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.92); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.boss-warning.visible { opacity:1; pointer-events:auto; }
.boss-warning-inner {
  max-width:440px; padding:36px 32px; text-align:center;
  background:linear-gradient(160deg,rgba(20,0,0,0.98),rgba(5,0,0,0.99));
  border:1px solid rgba(255,0,51,0.4); border-radius:10px;
  box-shadow:0 0 80px rgba(255,0,51,0.25),inset 0 0 50px rgba(0,0,0,0.6);
  animation:bossWarnReveal .5s cubic-bezier(.15,.7,.3,1) both;
}
@keyframes bossWarnReveal {
  from{ opacity:0; transform:scale(.9) translateY(10px); }
  to  { opacity:1; transform:scale(1) translateY(0); }
}
.boss-warning-symbol {
  font-size:2.8rem; display:block; margin-bottom:14px;
  animation:bossSymbolPulse 1.2s ease-in-out infinite;
  color:#ff0033; filter:drop-shadow(0 0 12px #ff0033);
}
@keyframes bossSymbolPulse {
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.15); opacity:0.8; }
}
.boss-warning-subtitle {
  display:block; font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.22em; color:rgba(255,80,80,.6); margin-bottom:6px;
  text-transform:uppercase;
}
.boss-warning-name {
  font-family:var(--font-display); font-size:clamp(1.8rem,5vw,2.6rem);
  color:#ff0033; letter-spacing:.12em; font-weight:700; margin:0 0 18px;
  text-shadow:0 0 20px rgba(255,0,51,.7);
}
.boss-warning-text {
  font-family:var(--font-display); font-size:clamp(.75rem,2vw,.9rem);
  color:rgba(255,160,160,.85); line-height:1.8; letter-spacing:.04em;
  margin-bottom:18px;
}
.boss-warning-countdown {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.22em;
  color:rgba(255,80,80,.4); animation:loreBlinkDismiss 1.5s ease-in-out infinite;
}

/* ── Boss Timer Bar (HUD lateral) ── */
.boss-bar {
  width:100%; padding:6px 0; display:flex; flex-direction:column; gap:4px;
  border-top:1px solid rgba(255,0,51,.2); margin-top:4px;
}
.boss-bar-label {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em;
  color:rgba(255,80,80,.8); text-align:center;
}
.boss-bar-track {
  width:100%; height:6px; background:rgba(255,0,51,.12); border-radius:3px;
  overflow:hidden;
}
.boss-timer-fill {
  height:100%; width:100%; border-radius:3px;
  background:#ff0033;
  box-shadow:0 0 6px rgba(255,0,51,.6);
  transition:width .3s linear, background .3s;
}
.boss-timer-num {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:#ff6666; text-align:center; font-weight:700;
}

/* ── Prestige Overlay ── */
.prestige-overlay {
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.9); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
  --prestige-color: #00ff6a;
}
.prestige-overlay.visible { opacity:1; pointer-events:auto; }
.prestige-overlay-inner {
  max-width:420px; padding:36px 30px; text-align:center;
  background:linear-gradient(160deg,rgba(4,4,20,0.98),rgba(2,2,10,0.99));
  border:1px solid rgba(var(--accent-rgb),0.3); border-radius:12px;
  box-shadow:0 0 60px rgba(var(--accent-rgb),0.2);
  animation:bossWarnReveal .5s cubic-bezier(.15,.7,.3,1) both;
}
.prestige-overlay-crown {
  font-size:2.5rem; display:block; margin-bottom:14px;
  color:var(--prestige-color); filter:drop-shadow(0 0 12px var(--prestige-color));
  animation:bossSymbolPulse 2s ease-in-out infinite;
}
.prestige-overlay-title {
  font-family:var(--font-display); font-size:.75rem; letter-spacing:.25em;
  color:rgba(var(--accent-rgb),.6); margin:0 0 16px; text-transform:uppercase;
}
.prestige-overlay-level {
  display:flex; flex-direction:column; gap:4px; margin-bottom:20px;
}
.prestige-overlay-num {
  font-family:var(--font-display); font-size:clamp(1.4rem,4vw,2rem);
  color:var(--prestige-color); letter-spacing:.12em; font-weight:700;
  text-shadow:0 0 16px var(--prestige-color);
}
.prestige-overlay-name {
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.15em;
  color:var(--prestige-color); opacity:.75;
}
.prestige-overlay-desc {
  font-family:var(--font-display); font-size:.82rem; color:rgba(255,255,255,.7);
  line-height:1.7; margin-bottom:24px;
}
.prestige-overlay-desc strong { color:var(--prestige-color); }
.prestige-overlay-actions { display:flex; flex-direction:column; gap:10px; }

/* ── Prestige Badge (player card) ── */
.prestige-badge {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em;
  text-align:center; padding:4px 8px; margin-top:4px;
  border-radius:4px; background:rgba(255,255,255,.04);
  font-weight:700; text-transform:uppercase;
}

@media(max-width:600px){
  .boss-warning-inner { padding:24px 18px; }
  .prestige-overlay-inner { padding:24px 18px; }
  .boss-bar { display:none; }
}

/* ── Perfect Clear flash ── */
#pc-flash {
  position:fixed; inset:0; z-index:700; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,220,0,0.45) 0%, rgba(0,255,180,0.2) 50%, transparent 75%);
  opacity:0;
}
#pc-flash.active { animation:pcFlashAnim 0.9s ease-out forwards; }
@keyframes pcFlashAnim {
  0%   { opacity:1; transform:scale(0.4); }
  35%  { opacity:1; transform:scale(1.15); }
  100% { opacity:0; transform:scale(1.4); }
}

/* ── Modo Invisible button ── */
.btn-invisible-sm {
  background:rgba(80,0,120,0.25); border-color:rgba(160,0,255,0.5); color:#cc66ff;
}
.btn-invisible-sm:hover { background:rgba(160,0,255,0.35); border-color:#bf00ff; color:#fff; }

/* ── Campaña nav button ── */
.btn-nav-campaign { background:rgba(255,180,0,0.12); border-color:rgba(255,180,0,0.4); color:#ffcc00; }
.btn-nav-campaign:hover { background:rgba(255,180,0,0.25); }

/* ── Post-game stats (APM) ── */
.postgame-stats {
  display:flex; flex-wrap:wrap; gap:8px 14px;
  justify-content:center; margin:6px 0 4px;
}
.pg-stat {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:rgba(0,255,106,0.05); border:1px solid rgba(0,255,106,0.15);
  border-radius:6px; padding:4px 10px; min-width:56px;
}
.pg-stat span { font-size:.75rem; color:var(--text-muted); letter-spacing:.08em; }
.pg-stat strong { font-size:1.05rem; color:#00ff6a; font-family:var(--font-mono); }
.pg-gold strong { color:#ffcc00 !important; }

/* ── Campaña screen ── */
.campaign-progress {
  text-align:center; font-size:.8rem; color:var(--text-muted);
  margin:0 0 12px; letter-spacing:.05em;
}
.campaign-list {
  display:flex; flex-direction:column; gap:8px;
  max-height:60vh; overflow-y:auto; padding:0 4px;
  scrollbar-width:thin; scrollbar-color:rgba(255,204,0,.3) transparent;
}
.camp-card {
  display:grid; grid-template-columns:2rem 1fr auto auto;
  align-items:center; gap:10px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; padding:10px 12px; transition:border-color .2s;
}
.camp-card.camp-done   { border-color:rgba(0,255,106,.3); opacity:.7; }
.camp-card.camp-locked { opacity:.45; filter:grayscale(.6); }
.camp-card:not(.camp-locked):not(.camp-done):hover { border-color:rgba(255,204,0,.4); }
.camp-icon { font-size:1.2rem; text-align:center; }
.camp-info strong { font-size:.85rem; color:var(--text-primary); display:block; }
.camp-info .camp-obj { font-size:.72rem; color:#ffcc00; margin:2px 0 0; }
.camp-info .camp-desc { font-size:.75rem; color:var(--text-muted); margin:2px 0 0; line-height:1.4; }
.camp-xp { font-size:.75rem; color:var(--text-muted); white-space:nowrap; }
.camp-btn { font-size:.8rem; padding:4px 10px; white-space:nowrap; }

@media(max-width:600px){
  .camp-card { grid-template-columns:1.6rem 1fr auto; }
  .camp-xp { display:none; }
  .pg-stat { padding:4px 8px; min-width:48px; }
}

/* ── Tanda J — nuevos botones de modo ── */
.btn-corrupted-sm {
  background:rgba(120,0,0,0.25); border-color:rgba(255,0,51,0.5); color:#ff4466;
}
.btn-corrupted-sm:hover { background:rgba(255,0,51,0.3); border-color:#ff0033; color:#fff; }

/* ── T-Spin Ultra overlay ── */
.tspin-ultra-overlay {
  position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:none;
}
.tspin-ultra-overlay.visible { animation:tsuReveal 1.7s ease-out forwards; }
@keyframes tsuReveal {
  0%   { opacity:0; }
  8%   { opacity:1; }
  70%  { opacity:1; }
  100% { opacity:0; }
}
.tsu-inner {
  text-align:center; padding:24px 36px;
  background:radial-gradient(ellipse at center,rgba(191,0,255,0.18) 0%,transparent 75%);
  border:1px solid rgba(191,0,255,0.35); border-radius:12px;
  animation:tsuScale 1.7s ease-out forwards;
}
@keyframes tsuScale {
  0%   { transform:scale(0.5); }
  12%  { transform:scale(1.08); }
  70%  { transform:scale(1); }
  100% { transform:scale(1.1); }
}
.tsu-symbol { font-size:3rem; animation:tsuSpin 1.7s linear forwards; }
@keyframes tsuSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.tsu-b2b { font-size:.75rem; color:#ffcc00; letter-spacing:.15em; min-height:1.2em; margin:0; }
.tsu-title {
  font-size:clamp(1.4rem,5vw,2.4rem); color:#bf00ff; margin:4px 0;
  text-shadow:0 0 24px rgba(191,0,255,1),0 0 48px rgba(191,0,255,.5);
  font-family:var(--font-display); letter-spacing:.12em;
}
.tsu-sub { font-size:.8rem; color:rgba(191,0,255,.7); letter-spacing:.2em; margin:0; }

/* ── Historial de partidas ── */
.hist-subtitle {
  font-size:.72rem; color:var(--text-muted); letter-spacing:.12em;
  margin:18px 0 6px; text-transform:uppercase;
}
.hist-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:5px 8px; border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:.72rem; font-family:var(--font-mono);
}
.hist-row:last-child { border-bottom:none; }
.hist-mode { font-size:1rem; flex-shrink:0; }
.hist-score { color:#00ff6a; font-weight:700; min-width:80px; }
.hist-dur,.hist-date { color:var(--text-muted); margin-left:auto; }

@media(max-width:600px){
  .hist-dur { display:none; }
  .tsu-title { font-size:1.4rem; }
}

/* ── K4: Stack Height Danger Indicator ── */
@keyframes stackWarnPulse {
  0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 15px rgba(255,150,0,.10); }
  50%    { box-shadow:0 0 0 1px rgba(255,150,0,.15),0 0 25px rgba(255,150,0,.20); }
}
@keyframes stackDangerPulse {
  0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 28px rgba(255,60,0,.25),inset 0 0 20px rgba(0,0,0,.5); }
  50%    { box-shadow:0 0 0 2px rgba(255,60,0,.35),0 0 50px rgba(255,60,0,.40),inset 0 0 28px rgba(0,0,0,.6); }
}
@keyframes stackCriticalPulse {
  0%,100%{ box-shadow:0 0 0 2px rgba(255,0,0,.45),0 0 40px rgba(255,0,0,.30),inset 0 0 28px rgba(0,0,0,.6); }
  50%    { box-shadow:0 0 0 3px rgba(255,0,0,.75),0 0 65px rgba(255,0,0,.50),inset 0 0 40px rgba(0,0,0,.7); }
}
.game-wrapper.stack-warn:not(.speed-danger) .game-canvas     { animation:stackWarnPulse 3s ease-in-out infinite; }
.game-wrapper.stack-danger:not(.speed-danger) .game-canvas   { animation:stackDangerPulse 1.8s ease-in-out infinite; border-color:rgba(255,60,0,.30); }
.game-wrapper.stack-critical .game-canvas { animation:stackCriticalPulse 0.9s ease-in-out infinite !important; border-color:rgba(255,0,0,.50); }

/* ── K2: skin-dot para skins nuevas ── */
.skin-btn[data-skin="matrix"] .skin-dot { box-shadow:0 0 6px rgba(0,255,0,.8); }
.skin-btn[data-skin="sangre"] .skin-dot { box-shadow:0 0 6px rgba(200,0,0,.8); }

/* ── M: btn-survival ── */
.btn-survival-sm { border-color:rgba(255,200,0,.35); color:rgba(255,200,0,.75); }
.btn-survival-sm:hover { background:rgba(255,200,0,.10); border-color:rgba(255,200,0,.55); color:#ffc800; }

/* ── M: btn-lang ── */
.btn-lang { letter-spacing:.15em; font-size:.75rem; opacity:.75; }
.btn-lang:hover { opacity:1; color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }

/* ── M: Record overlay ── */
.record-overlay {
  position:fixed; inset:0; z-index:9900; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .25s;
}
.record-overlay.visible { opacity:1; }
.record-overlay-inner {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:rgba(4,4,10,.88); border:2px solid #ffd700;
  border-radius:14px; padding:24px 40px; box-shadow:0 0 40px rgba(255,215,0,.35), 0 0 80px rgba(255,215,0,.12);
  animation:recordPop .35s cubic-bezier(.17,.67,.30,1.45) both;
}
.record-overlay:not(.visible) .record-overlay-inner { animation:recordOut .25s ease-in both; }
.record-crown { font-size:2.2rem; animation:crownSpin 1.8s linear infinite; display:inline-block; }
.record-label { font-family:var(--font-display); font-size:1.05rem; font-weight:900; letter-spacing:.12em; color:#ffd700; text-shadow:0 0 18px #ffd700; }
.record-score-wrap { font-family:var(--font-display); }
.record-score { font-size:1.55rem; font-weight:900; color:#fff; letter-spacing:.08em; }
@keyframes recordPop {
  from { transform:scale(.6) translateY(30px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}
@keyframes recordOut {
  from { transform:scale(1); opacity:1; }
  to   { transform:scale(.8) translateY(-20px); opacity:0; }
}
@keyframes crownSpin {
  0%   { transform:rotate(-12deg) scale(1); }
  25%  { transform:rotate(0deg)   scale(1.15); }
  50%  { transform:rotate(12deg)  scale(1); }
  75%  { transform:rotate(0deg)   scale(1.15); }
  100% { transform:rotate(-12deg) scale(1); }
}

/* ── Modo portal: lo apagado no vuelve aunque el código lo quiera enseñar ── */
.portal-off { display:none !important; }

/* ── Anuncios con recompensa ── */
.btn-ad { border-color:rgba(var(--accent-rgb),.6); color:var(--accent); }
.btn-ad:disabled { opacity:.5; }
.ad-offer-count {
  font-family:var(--font-display); font-size:2.4rem; text-align:center; color:var(--accent);
  text-shadow:0 0 18px rgba(var(--accent-rgb),.6);
}
.ad-sim {
  position:fixed; inset:0; z-index:9900; display:flex; align-items:center; justify-content:center;
  background:#000;
}
.ad-sim-box { display:flex; flex-direction:column; align-items:center; gap:18px; }
.ad-sim-tag { font-family:var(--font-display); letter-spacing:.2em; color:rgba(255,255,255,.6); }
.ad-sim-count { font-family:var(--font-display); font-size:4rem; color:#fff; }

/* ── M: Alias modal ── */
.alias-modal {
  position:fixed; inset:0; z-index:9800; display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,10,.75); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.alias-modal.visible { opacity:1; pointer-events:auto; }
.alias-modal-box {
  background:#0c0c18; border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:12px; padding:28px 32px; min-width:280px; max-width:360px; width:90vw;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 0 40px rgba(var(--accent-rgb),.18);
  animation:aliasBoxIn .25s ease both;
}
.alias-modal-title { font-family:var(--font-display); font-size:.95rem; letter-spacing:.15em; color:var(--accent); margin:0; }
.alias-modal-desc  { font-size:.72rem; color:rgba(255,255,255,.45); margin:0; }
.alias-modal-input {
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.04); border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:6px; color:#fff; padding:10px 14px; width:100%; box-sizing:border-box;
  outline:none; transition:border-color .15s;
}
.alias-modal-input:focus { border-color:rgba(var(--accent-rgb),.7); }
.alias-modal-btns { display:flex; gap:10px; justify-content:flex-end; }
.alias-modal-confirm { padding:8px 18px; font-size:.75rem; }
@keyframes aliasBoxIn {
  from { transform:scale(.9) translateY(12px); opacity:0; }
  to   { transform:scale(1)  translateY(0);    opacity:1; }
}

/* ══════════════════════════════════════════════════════════════
   AUDITORÍA — Menú agrupado, avisos y ajustes para app móvil
   ══════════════════════════════════════════════════════════════ */

/* ─── Aviso breve (sustituye a alert/prompt nativos) ─── */
.bf-toast {
  position:fixed; left:50%;
  bottom:calc(var(--touch-h, 0px) + 24px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,16px);
  max-width:min(88vw,420px);
  background:rgba(4,4,14,.96);
  border:1px solid rgba(var(--accent-rgb),.45);
  border-radius:4px;
  padding:12px 18px;
  font-family:var(--font-mono); font-size:.72rem; line-height:1.5;
  color:#fff; text-align:center;
  box-shadow:0 0 30px rgba(var(--accent-rgb),.18), 0 8px 30px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:10000;
}
.bf-toast.visible { opacity:1; transform:translate(-50%,0); }

/* ─── Menú de inicio agrupado ─── */
.start-nav { display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; }
.nav-group-label {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.22em; color:rgba(255,255,255,.34);
  margin:6px 0 1px; text-align:left;
}
.nav-group-label:first-child { margin-top:2px; }
.btn-more-modes {
  width:100%; padding:6px 4px;
  font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em;
  background:transparent; border:1px dashed rgba(var(--accent-rgb),.28);
  color:rgba(var(--accent-rgb),.75); cursor:pointer; border-radius:2px;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-more-modes:hover,
.btn-more-modes:focus-visible { background:rgba(var(--accent-rgb),.1); color:var(--accent); border-color:rgba(var(--accent-rgb),.5); }
.start-modes-extra { margin-top:-2px; }

/* ─── Móvil: primero quién eres, luego JUGAR ─── */
@media(max-width:820px){
  .player-card  { order:1; padding:10px 12px; gap:6px; }
  .start-center { order:2; }
  .start-right  { order:3; }
  .player-card .season-indicator { margin-top:2px; }
}

/* Objetivo táctil mínimo cómodo en los botones del menú */
@media(pointer:coarse){
  .btn-nav, .btn-mode { min-height:38px; }
  .btn-more-modes { min-height:34px; }
}

/* ─── Foco visible para teclado (accesibilidad) ─── */
.btn-nav:focus-visible,
.btn-mode:focus-visible,
.skin-btn:focus-visible,
.hs-tab:focus-visible,
.toggle-btn:focus-visible,
.touch-btn:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ─── Controles táctiles: fuera de la zona del gesto del sistema ─── */
.touch-controls {
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  padding-left:calc(6px + env(safe-area-inset-left,0px));
  padding-right:calc(6px + env(safe-area-inset-right,0px));
}

/* ─── Sin selección ni menú contextual al mantener pulsado ─── */
.touch-btn, .btn-nav, .btn-mode, .mhud-btn, .btn-icon {
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ─── Menos movimiento si el sistema lo pide ─── */
@media(prefers-reduced-motion:reduce){
  .game-logo { animation:none; }
  .void-ring { animation:none; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* El botón de pausa vivía pegado al de rotar: con el pulgar derecho era
   fácil pausar sin querer en mitad de una caída. Se sube arriba del grupo
   y se separa, que es la zona a la que no llega el pulgar por accidente. */
.touch-zone-right .t-pause {
  order: -1;
  margin-bottom: 10px;
  opacity: .8;
}

/* ─── Aviso de orientación ───────────────────────────────────────
   Solo en dispositivos táctiles apaisados y de poca altura, es decir,
   un móvil girado. Nunca en tablet ni en escritorio. */
.rotate-notice { display:none; }
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .rotate-notice {
    display:flex; position:fixed; inset:0; z-index:12000;
    align-items:center; justify-content:center;
    background:#04040a;
  }
  .rotate-notice-inner { text-align:center; padding:0 24px; }
  .rotate-icon {
    display:block; font-size:3.4rem; color:var(--accent);
    margin-bottom:14px;
    animation:rotateHint 2.4s ease-in-out infinite;
  }
  .rotate-text {
    font-family:var(--font-display); font-size:.85rem;
    letter-spacing:.14em; color:#fff; line-height:1.6;
  }
  @keyframes rotateHint {
    0%,100% { transform:rotate(0deg); }
    40%,60% { transform:rotate(90deg); }
  }
}

/* ─── Legibilidad ────────────────────────────────────────────────
   Varios textos quedaban por debajo del contraste mínimo AA (4.5:1)
   y a 8-9 px, demasiado pequeños para leerlos en un móvil. */
.nav-group-label { color: rgba(255,255,255,.62); font-size:.75rem; }
.screen-tagline  { color: rgba(255,255,255,.72); }
.pc-xp-label     { color: rgba(255,255,255,.66); font-size:.75rem; }
.pc-level        { color: rgba(255,255,255,.62); }

@media (max-width: 820px) {
  .btn-nav  { font-size: .7rem; }
  .btn-mode { font-size:.75rem; }
  .pc-badge { font-size:.75rem; }
  .pc-tier-name { font-size: .7rem; }
  .btn-more-modes { font-size:.75rem; }
  .skin-btn { font-size:.75rem; }
}

/* La fila de aspectos se desliza. Las flechas dicen que hay más y permiten
   moverla con el ratón; el desvanecimiento solo aparece en el lado donde
   queda algo por ver. */
.skin-picker { display:flex; align-items:center; gap:4px; min-width:0; }
.skin-picker .skin-row { flex:1; min-width:0; }
.skin-row.fade-right { -webkit-mask-image:linear-gradient(to right,#000 0,#000 85%,transparent 100%); mask-image:linear-gradient(to right,#000 0,#000 85%,transparent 100%); }
.skin-row.fade-left  { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 100%); mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 100%); }
.skin-row.fade-left.fade-right { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%); }
.skin-arrow {
  flex:none; width:2rem; height:2rem; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.08);
  color:var(--accent); font-size:.75rem; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.skin-arrow:hover { background:rgba(var(--accent-rgb),.2); }
.skin-arrow[hidden] { display:none; }

/* El aspecto temático de la temporada, marcado en el selector: sin esto la
   temporada era solo un contador de días que no significaba nada. */
.skin-btn.skin-season { border-color: rgba(var(--accent-rgb),.55); }
.skin-btn.skin-season::after {
  content: "✦";
  font-size: .7em;
  margin-left: 4px;
  opacity: .85;
}

/* Segunda línea del aviso cuando el marcador global no responde. */
.hs-empty-sm { font-size:.75rem; opacity: .7; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   CUENTA Y PROGRESO EN LA NUBE
   ══════════════════════════════════════════════════════════════ */
.acc-box {
  display:flex; flex-direction:column; gap:8px;
  width:100%; max-width:340px; margin:0 auto;
  background:rgba(4,4,14,.7);
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:6px; padding:16px 14px;
}
.acc-label {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.16em; color:rgba(255,255,255,.62);
  margin-top:4px;
}
.acc-input {
  font-family:var(--font-mono); font-size:.85rem;
  padding:10px 12px; min-height:44px;
  background:rgba(0,0,0,.5); color:#fff;
  border:1px solid rgba(var(--accent-rgb),.3); border-radius:4px;
  width:100%;
}
.acc-input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.2);
}
.acc-btns { display:flex; gap:8px; margin-top:10px; }
.acc-btns > * { flex:1; min-width:0; }
.acc-nota {
  font-family:var(--font-mono); font-size:.75rem; line-height:1.5;
  color:rgba(255,255,255,.55); margin-top:8px; text-align:center;
}
.acc-user-row {
  display:flex; align-items:center; gap:8px; justify-content:center;
  padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.1);
}
.acc-user-ico { color:var(--accent); font-size:1rem; }
.acc-user-mail {
  font-family:var(--font-mono); font-size:.72rem; color:#fff;
  word-break:break-all;
}
.acc-resumen {
  display:grid; grid-template-columns:1fr 1fr; gap:4px 10px;
  font-family:var(--font-mono); font-size:.75rem;
  color:rgba(255,255,255,.75); padding:8px 0;
}
.acc-danger { color:rgba(255,80,80,.75); margin-top:2px; }
.acc-danger:hover { color:#ff5050; }
.acc-msg {
  font-family:var(--font-mono); font-size:.75rem; line-height:1.5;
  text-align:center; color:var(--accent);
  min-height:1.2em; margin-top:10px;
  opacity:0; transition:opacity .2s;
}
.acc-msg.visible { opacity:1; }
.acc-msg-error { color:#ff6a6a; }

/* Diálogo de conflicto: el jugador elige, nunca el juego */
.acc-conflicto {
  position:fixed; inset:0; z-index:11000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,2,6,.92); padding:16px;
}
.acc-conflicto[hidden] { display:none; }
.acc-conf-box {
  background:rgba(6,6,16,.98);
  border:1px solid rgba(var(--accent-rgb),.4);
  border-radius:8px; padding:20px 16px;
  max-width:460px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 0 50px rgba(var(--accent-rgb),.15);
}
.acc-conf-title {
  font-family:var(--font-display); font-size:.9rem;
  letter-spacing:.14em; color:var(--accent); text-align:center;
}
.acc-conf-desc {
  font-family:var(--font-mono); font-size:.75rem;
  color:rgba(255,255,255,.7); text-align:center; margin:6px 0 14px;
}
.acc-conf-cols { display:flex; gap:10px; }
.acc-conf-col {
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px; padding:10px 8px;
}
.acc-conf-h {
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.12em; color:rgba(255,255,255,.8); text-align:center;
}
.acc-conf-col .acc-resumen { grid-template-columns:1fr; font-size:.75rem; }
.acc-conf-fecha {
  font-family:var(--font-mono); font-size:.75rem;
  color:rgba(255,255,255,.45); text-align:center;
}
.acc-conf-col button { width:100%; margin-top:auto; font-size:.75rem; padding:9px 4px; }

@media (max-width:420px){
  .acc-conf-cols { flex-direction:column; }
}

/* Recuadro horizontal y bajo (portales en ordenador, ~960x540): con la letra
   base normal los paneles laterales de la partida no caben. */
@media (max-height: 620px) and (min-aspect-ratio: 4/3) {
  html { font-size: 15px; }
}