/* Neon Dash Runner - extra polish beyond Tailwind */
:root{
  --bg0:#020617;
  --bg1:#0b1224;
  --neon:#22d3ee;
  --neon2:#a78bfa;
  --hot:#fb7185;
  --ok:#34d399;
  --warn:#fbbf24;
}

*{ box-sizing:border-box; }

::selection{ background: rgba(34,211,238,.25); }

.neon-card{
  background: radial-gradient(1200px 500px at 20% 0%, rgba(34,211,238,.12), transparent 55%),
              radial-gradient(900px 450px at 80% 20%, rgba(167,139,250,.12), transparent 55%),
              linear-gradient(180deg, rgba(15,23,42,.75), rgba(2,6,23,.75));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.neon-border{
  position: relative;
}
.neon-border:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  padding:1px;
  background: linear-gradient(90deg, rgba(34,211,238,.55), rgba(167,139,250,.55), rgba(251,113,133,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}

.focus-ring:focus-visible{
  outline: 2px solid rgba(34,211,238,.9);
  outline-offset: 2px;
}

.btn-pop{
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
}
.btn-pop:active{ transform: scale(.98); filter: brightness(1.05); }

@keyframes floaty{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}
.floaty{ animation: floaty 3.2s ease-in-out infinite; }

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
.shimmer{
  background: linear-gradient(90deg, rgba(34,211,238,.15), rgba(167,139,250,.15), rgba(34,211,238,.15));
  background-size: 200% 200%;
  animation: shimmer 2.2s ease-in-out infinite;
}

.canvas-wrap{
  border-radius: 16px;
  overflow: hidden;
}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.65);
}