* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #cfefff;
}

#game { position: fixed; inset: 0; cursor: none; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  pointer-events: none;
  z-index: 5;
}
#hud-left { display: flex; align-items: baseline; gap: 12px; }
#level-name {
  font-size: 15px; letter-spacing: 4px; text-transform: uppercase;
  color: #7fe7ff; text-shadow: 0 0 8px rgba(77,227,255,.8);
}
#level-num { font-size: 12px; letter-spacing: 2px; color: rgba(207,239,255,.45); }
#hud-right { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
#counter {
  font-size: 14px; letter-spacing: 3px; color: #ffd45d;
  text-shadow: 0 0 8px rgba(255,212,93,.7); margin-right: 6px;
}
#hud button {
  background: transparent; border: 1px solid rgba(77,227,255,.35);
  color: #7fe7ff; border-radius: 50%;
  width: 32px; height: 32px; font-size: 15px; line-height: 1;
  cursor: pointer; transition: all .2s;
  touch-action: manipulation;
}
#hud button:hover { border-color: #4de3ff; box-shadow: 0 0 12px rgba(77,227,255,.5); }
#hud button.muted { color: rgba(207,239,255,.25); border-color: rgba(77,227,255,.12); }

button.neon, #hud button { -webkit-tap-highlight-color: transparent; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 22px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(0,8,14,.55) 0%, rgba(0,0,0,.92) 80%);
  cursor: default;
}
.overlay h1 {
  font-size: 72px; font-weight: 200; letter-spacing: 28px; margin-left: 28px; /* optically center spaced caps */
  color: #eaffff;
  text-shadow:
    0 0 8px  rgba(77,227,255,.9),
    0 0 24px rgba(77,227,255,.6),
    0 0 80px rgba(77,227,255,.35);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { text-shadow: 0 0 8px rgba(77,227,255,.9), 0 0 24px rgba(77,227,255,.6), 0 0 80px rgba(77,227,255,.35); }
  50%      { text-shadow: 0 0 6px rgba(77,227,255,.7), 0 0 18px rgba(77,227,255,.45), 0 0 60px rgba(77,227,255,.25); }
}
.overlay .sub {
  font-size: 14px; letter-spacing: 6px; text-transform: uppercase;
  color: rgba(207,239,255,.6);
}
.overlay .how {
  font-size: 14px; line-height: 2; letter-spacing: 1px;
  color: rgba(207,239,255,.5); max-width: 560px;
}
.overlay .how em { color: #7fe7ff; font-style: normal; text-shadow: 0 0 8px rgba(77,227,255,.6); }
#clear-title { font-size: 44px; letter-spacing: 16px; margin-left: 16px; }

.btnrow { display: flex; gap: 16px; margin-top: 10px; }
button.neon {
  background: transparent;
  border: 1px solid rgba(77,227,255,.5);
  color: #c9f6ff;
  font: inherit; font-size: 13px; letter-spacing: 5px; text-transform: uppercase;
  padding: 14px 34px; border-radius: 2px; cursor: pointer;
  transition: all .25s;
  text-shadow: 0 0 8px rgba(77,227,255,.6);
}
button.neon:hover {
  border-color: #4de3ff;
  box-shadow: 0 0 20px rgba(77,227,255,.45), inset 0 0 14px rgba(77,227,255,.12);
  color: #fff;
}
button.neon.gold { border-color: rgba(255,212,93,.5); color: #ffe9ad; text-shadow: 0 0 8px rgba(255,212,93,.6); }
button.neon.gold:hover { border-color: #ffd45d; box-shadow: 0 0 20px rgba(255,212,93,.45), inset 0 0 14px rgba(255,212,93,.12); }

/* ---------- CRT dressing ---------- */
.scanlines {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px,
    transparent 1px, transparent 3px);
}
.vignette {
  position: fixed; inset: 0; z-index: 21; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.6) 100%);
}

/* ---------- small / touch screens ---------- */
@media (max-width: 640px), (pointer: coarse) {
  #hud { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  #hud button { width: 44px; height: 44px; font-size: 18px; }
  .overlay h1 { font-size: 15vw; letter-spacing: 10px; margin-left: 10px; }
  #clear-title { font-size: 9vw; letter-spacing: 6px; margin-left: 6px; }
  .overlay .how, .overlay .sub { font-size: 13px; letter-spacing: 2px; padding: 0 18px; }
  .overlay .how { line-height: 1.8; max-width: 92vw; }
  button.neon { padding: 14px 24px; font-size: 12px; letter-spacing: 3px; }
  .btnrow { flex-wrap: wrap; justify-content: center; }
}