/* Standalone styling for the neon geometry-dash clone */
:root{
  --gd-bg0:#05010a;
  --gd-bg1:#0b0620;
  --gd-cyan:#00e5ff;
  --gd-pink:#ff4fd8;
  --gd-purple:#7c4dff;
  --gd-yellow:#ffd166;
  --gd-ink:rgba(255,255,255,0.92);
  --gd-muted:rgba(255,255,255,0.72);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-rounded, "Trebuchet MS", "Comic Sans MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(124,77,255,0.35), transparent 55%),
    radial-gradient(900px 500px at 85% 15%, rgba(0,229,255,0.26), transparent 55%),
    linear-gradient(180deg, var(--gd-bg0), var(--gd-bg1));
  overflow:hidden;
}

#gd-wrap{
  position:fixed;
  inset:0;
}

#gd-canvas{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
}

#gd-hud{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}

.gd-hud-left,.gd-hud-right{
  font-weight:900;
  letter-spacing:0.2px;
  color:var(--gd-ink);
  text-shadow:0 6px 24px rgba(0,0,0,0.35);
}

#gd-hud span{
  font-variant-numeric: tabular-nums;
}

#gd-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,0.35);
}

.gd-overlay-inner{
  width:min(520px, 92vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 80px rgba(0,0,0,0.45);
  padding:18px 16px 16px;
  color:var(--gd-ink);
}

.gd-title{
  font-size:28px;
  font-weight:950;
  margin-bottom:6px;
  color: rgba(255,255,255,0.98);
}

.gd-subtitle{
  color:var(--gd-muted);
  font-weight:750;
  margin-bottom:14px;
}

.gd-btn{
  display:inline-block;
  width:100%;
  padding:12px 14px;
  border-radius:18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(90deg, rgba(0,229,255,0.24), rgba(255,79,216,0.18));
  color: rgba(255,255,255,0.95);
  font-weight:950;
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.gd-btn:active{
  transform: translateY(1px);
}

.gd-controls{
  margin-top:12px;
  color: var(--gd-muted);
  font-weight:800;
  line-height:1.6;
}

.kbd{
  display:inline-block;
  padding:4px 8px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight:950;
}

.sep{ opacity:0.8; padding:0 10px; }