* { box-sizing: border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
:root{
  --bg-1: #05060a;
  --bg-2: #071026;
  --card: rgba(10,14,30,0.6);
  --glass: rgba(255,255,255,0.04);
  --muted: #9fb4d6;
  --text: #e6f7ff;
  --neon-a: #00f0ff; /* cyan */
  --neon-b: #7c4dff; /* violet */
  --accent: linear-gradient(90deg,var(--neon-a),var(--neon-b));
  --grid: rgba(255,255,255,0.04);
  --glow: 0 6px 30px rgba(124,77,255,0.18), 0 0 20px rgba(0,240,255,0.06);
  --radius: 14px;
  --glass-blur: 8px;
  --panel-border: rgba(255,255,255,0.06);
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
}

html,body {
  height:100%;
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(124,77,255,0.08), transparent 8%),
    radial-gradient(500px 240px at 90% 80%, rgba(0,240,255,0.04), transparent 6%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2) 60%);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
}

/* Mejoras de interacción: evitar overscroll y gestos táctiles que interfieran con el juego */
html, body {
  overscroll-behavior: none; /* evita el rebote/scroll de la página en gestos */
}

canvas#game, canvas#next, canvas#hold, .t-btn {
  touch-action: none; /* deshabilita gestos táctiles por defecto (panning/zoom) */
  -ms-touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Topbar */
.topbar {
  max-width:980px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
}
.topbar h1{
  margin:0; font-size:1.45rem; letter-spacing:0.6px;
  background: linear-gradient(90deg, var(--neon-a), var(--neon-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 6px 24px rgba(124,77,255,0.06);
}
.stats { display:flex; gap:14px; color:var(--muted); font-weight:600; font-size:.95rem; }

/* Container */
.container { max-width:980px; margin:0 auto; padding:10px 20px 36px; }

/* Controls */
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--panel-border);
  color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
  box-shadow: var(--glow); transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(124,77,255,0.14); }
.control { color:var(--muted); font-size:.95rem; display:inline-flex; gap:8px; align-items:center; }

/* Stage */
.stage-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding:18px; position:relative; display:grid; grid-template-columns:auto 180px; gap:18px;
  border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 20px 60px rgba(2,6,23,0.6);
  backdrop-filter: blur(var(--glass-blur));
}

/* Canvas styling */
canvas#game {
  width: min(80vw, 320px);
  height: calc(min(80vw, 320px) * 2);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, var(--grid) 28px, var(--grid) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, var(--grid) 28px, var(--grid) 29px),
    linear-gradient(180deg, rgba(10,12,20,0.75), rgba(6,8,18,0.9));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6), 0 18px 60px rgba(7,16,40,0.6);
  image-rendering: pixelated;
  display:block;
}

/* Side panels */
.sidepanels { display:grid; gap:12px; }
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px; padding:12px; width:180px;
  border: 1px solid var(--panel-border); color:var(--muted);
  box-shadow: 0 8px 30px rgba(2,6,23,0.5);
}
.panel h3{ margin:0 0 8px; font-size:1rem; color:var(--text); }
.muted{ color:var(--muted); font-weight:600; }

/* HUD numbers with neon accent */
#score, #lines, #level, #highScore {
  font-variant-numeric: tabular-nums;
  font-weight:800; color:var(--text); font-size:1.05rem;
  text-shadow: 0 8px 30px rgba(0,240,255,0.04);
}
.panel .value {
  display:inline-block; padding:6px 10px; border-radius:8px;
  background: linear-gradient(90deg, rgba(124,77,255,0.06), rgba(0,240,255,0.03));
  border:1px solid rgba(255,255,255,0.02);
}

/* Next & Hold canvases */
canvas#next, canvas#hold {
  width: 100%; height: auto; display:block; background:transparent;
  border-radius:8px;
}

/* Overlay / modal */
.overlay {
  position:absolute; inset:18px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(2,6,23,0.65), rgba(2,6,23,0.45));
  border-radius: var(--radius); transition: opacity .2s ease; pointer-events:auto; grid-column:1 / -1;
  border: 1px solid rgba(124,77,255,0.06);
}
.overlay.hidden { opacity:0; pointer-events:none; }
.overlay-content{
  min-width:240px; padding:20px 22px; border-radius:12px;
  background: linear-gradient(180deg, rgba(6,8,18,0.9), rgba(10,12,22,0.75));
  color:var(--muted); text-align:center; border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 14px 40px rgba(2,6,23,0.6);
}
.overlay-title {
  font-size:1.1rem; color:var(--text); margin-bottom:6px;
  background: var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Touch buttons (futuristic) */
.touch { display:grid; gap:8px; margin-top:10px; }
.touch .row { display:flex; gap:8px; justify-content:center; }
.t-btn {
  width:56px; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--text); font-size:16px; cursor:pointer; box-shadow: 0 6px 20px rgba(7,16,40,0.6);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.t-btn:active { transform: translateY(2px); background: linear-gradient(90deg,var(--neon-a),var(--neon-b)); box-shadow: 0 18px 50px rgba(124,77,255,0.14); color:#001; }

/* Small details */
.footer { max-width:980px; margin:10px auto 28px; padding:0 20px; color:var(--muted); font-size:.9rem; text-align:center; }
.panel small { color:var(--muted); display:block; margin-top:6px; }

/* Responsive adjustments */
@media (max-width:720px){
  .stage-wrap { grid-template-columns: 1fr; }
  .sidepanels { grid-auto-flow: column; overflow:auto; width:100%; padding-bottom:6px; gap:8px; }
  .panel { width:140px; padding:10px; }
  canvas#game { width: min(92vw, 320px); height: calc(min(92vw, 320px) * 2); }
}

/* Micro animations */
@keyframes pulseNeon {
  0% { box-shadow: 0 6px 20px rgba(124,77,255,0.06); }
  50% { box-shadow: 0 20px 60px rgba(0,240,255,0.06); transform: translateY(-1px); }
  100% { box-shadow: 0 6px 20px rgba(124,77,255,0.06); transform: translateY(0); }
}
.btn.neon { background: var(--accent); color:#041026; animation: pulseNeon 3s ease-in-out infinite; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .btn, .t-btn { transition: none; animation: none; }
  * { scroll-behavior: auto !important; }
}