:root{
  --pink:  #ff2bd6;
  --cyan:  #00e5ff;
  --yellow:#ffe93b;
  --ink:   #050714;
  --ink-2: #0b1030;
  --ghost: #e9edff;
  --glass: rgba(10, 14, 36, 0.72);
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  color:var(--ghost);
  touch-action:none;
  overscroll-behavior:none;
}

#gameCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  cursor:pointer;
}

/* ---------- HUD ---------- */
#hud{
  position:fixed;
  top:clamp(10px, 3vh, 28px);
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
  z-index:5;
}

#scoreDisplay{
  font-size:clamp(32px, 8vw, 56px);
  font-weight:800;
  letter-spacing:2px;
  color:#fff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.9),
    0 0 18px rgba(0,229,255,0.8),
    0 0 40px rgba(0,229,255,0.4);
  font-variant-numeric: tabular-nums;
}

#colorChip{
  width:22px; height:22px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(255,255,255,0.25);
}
#colorChipDot{
  width:12px;height:12px;border-radius:50%;
  background:var(--ghost);
  box-shadow:0 0 10px var(--ghost);
  transition: background .2s ease, box-shadow .2s ease;
}

/* ---------- Mute button ---------- */
#muteBtn{
  position:fixed;
  top:clamp(10px, 3vh, 24px);
  right:clamp(10px, 3vw, 24px);
  z-index:6;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(10,14,36,0.55);
  color:#dfe6ff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(4px);
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}
#muteBtn:hover{ box-shadow:0 0 14px rgba(0,229,255,0.5); border-color: rgba(0,229,255,0.6); }
#muteBtn:active{ transform: scale(0.92); }

/* ---------- Overlays ---------- */
.overlay{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(ellipse at 50% 35%, rgba(30,20,60,0.65), rgba(2,3,10,0.92) 70%);
  backdrop-filter: blur(3px);
  transition: opacity .35s ease, visibility .35s ease;
  padding: 16px;
}
.overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.panel{
  width:min(440px, 92vw);
  max-height: 94vh;
  overflow-y:auto;
  text-align:center;
  padding: clamp(18px, 4vh, 32px) clamp(18px, 5vw, 30px);
  border-radius:22px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 20px 60px rgba(0,0,0,0.5), 0 0 60px rgba(0,229,255,0.08);
  animation: floatIn .5s cubic-bezier(.2,.9,.25,1);
}

@keyframes floatIn{
  from{ transform: translateY(18px) scale(.97); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.logo{
  margin:0 0 6px;
  line-height:1;
  font-weight:900;
  letter-spacing:3px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.logo .l1{
  font-size:clamp(26px, 6.5vw, 36px);
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,0.7), 0 0 26px var(--pink);
}
.logo .l2{
  font-size:clamp(38px, 9vw, 54px);
  background:linear-gradient(90deg, var(--pink), var(--cyan) 55%, var(--yellow));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: drop-shadow(0 0 18px rgba(0,229,255,0.45));
}

.gameover-title{
  font-size:clamp(36px, 9vw, 52px);
  letter-spacing:6px;
  color:#fff;
  text-shadow:0 0 12px #fff, 0 0 30px var(--pink), 0 0 60px var(--pink);
  margin-bottom:10px;
}

.tagline{
  margin:4px 0 16px;
  color:#b9c2f0;
  font-size:clamp(13px, 3.2vw, 15px);
}

.legend{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
  font-size:12px;
  color:#c7cff5;
}
.legend-item{ display:flex; align-items:center; gap:6px; }
.swatch{ width:12px;height:12px;border-radius:50%; display:inline-block; }
.swatch.pink{ background:var(--pink); box-shadow:0 0 8px var(--pink); }
.swatch.cyan{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.swatch.yellow{ background:var(--yellow); box-shadow:0 0 8px var(--yellow); }

.howto{
  text-align:left;
  margin:0 auto 20px;
  padding-left:18px;
  max-width:360px;
  font-size:clamp(12.5px, 3vw, 14px);
  color:#cdd4f7;
  line-height:1.6;
}
.howto b{ color:#fff; }

.cta{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:14px 34px;
  font-size:clamp(15px, 3.6vw, 17px);
  font-weight:700;
  letter-spacing:1px;
  border-radius:999px;
  color:#04060f;
  background:linear-gradient(90deg, var(--cyan), #7dfcff);
  box-shadow:0 0 18px rgba(0,229,255,0.55), 0 6px 18px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .2s ease;
}
.cta:hover{ box-shadow:0 0 28px rgba(0,229,255,0.85), 0 6px 18px rgba(0,0,0,0.4); transform: translateY(-1px); }
.cta:active{ transform: translateY(0) scale(.97); }

.bestRow{
  margin-top:14px;
  font-size:13px;
  color:#9aa4d6;
  letter-spacing:.5px;
}

.stat-row{
  display:flex;
  justify-content:center;
  gap:34px;
  margin:10px 0 22px;
}
.stat-label{
  font-size:12px;
  letter-spacing:2px;
  color:#9aa4d6;
  text-transform:uppercase;
  margin-bottom:2px;
}
.stat-value{
  font-size:clamp(28px, 7vw, 38px);
  font-weight:800;
  color:#fff;
  text-shadow:0 0 14px rgba(0,229,255,0.6);
}

.new-best{
  display:inline-block;
  margin-bottom:10px;
  padding:5px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#1a1200;
  background:linear-gradient(90deg, var(--yellow), #fff6b0);
  box-shadow:0 0 16px rgba(255,233,59,0.7);
  animation: pulseBadge 1s ease-in-out infinite;
}
.new-best.hidden{ display:none; }

@keyframes pulseBadge{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

@media (max-height: 560px){
  .howto li{ margin-bottom:2px; }
  .tagline{ margin-bottom:10px; }
  .legend{ margin-bottom:8px; }
}