* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #eeece7;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#game { position: fixed; inset: 0; display: block; touch-action: none; }

#hud { position: fixed; top: 20px; left: 24px; pointer-events: none; opacity: 0; transition: opacity .4s; }
#hud.show { opacity: 1; }
#score { font-size: 58px; font-weight: 200; color: #3d3c3a; line-height: 1; font-variant-numeric: tabular-nums; }
#best { margin-top: 8px; font-size: 13px; color: #a09c93; letter-spacing: 2px; }

#mute {
  position: fixed; top: 20px; right: 20px; width: 42px; height: 42px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.75);
  box-shadow: 0 2px 10px rgba(0,0,0,.07); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #6b675f;
  transition: transform .15s;
}
#mute:active { transform: scale(.92); }
#mute svg { width: 20px; height: 20px; }
#mute .off { display: none; }
#mute.muted .on { display: none; }
#mute.muted .off { display: block; }

#debug {
  position: fixed; left: 16px; bottom: 16px; z-index: 5;
  font: 12px/1.8 Consolas, "Courier New", monospace;
  color: #55524b; background: rgba(255,255,255,.8);
  padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  white-space: pre; pointer-events: none;
}
#debug b { font-weight: 600; }

#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .45s;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.28), rgba(255,255,255,0) 62%);
}
#overlay.hidden { opacity: 0; pointer-events: none; }

.panel { text-align: center; animation: rise .6s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.title { font-size: 64px; font-weight: 200; color: #3d3c3a; letter-spacing: 14px; text-indent: 14px; }
.subtitle { margin-top: 18px; font-size: 14px; color: #96928a; letter-spacing: 3px; line-height: 2; }

.btn {
  margin-top: 38px; padding: 13px 52px; font-size: 16px; letter-spacing: 6px; text-indent: 6px;
  color: #3d3c3a; background: rgba(255,255,255,.92); border: none; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(90,85,70,.14); cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { box-shadow: 0 8px 26px rgba(90,85,70,.2); }
.btn:active { transform: scale(.94); }

.overScore { font-size: 88px; font-weight: 200; color: #3d3c3a; line-height: 1; }
.overLabel { margin-top: 12px; font-size: 13px; color: #a09c93; letter-spacing: 3px; }
.newBest {
  display: inline-block; margin-top: 16px; padding: 4px 14px; font-size: 12px; letter-spacing: 3px;
  color: #fff; background: #d9b36a; border-radius: 999px;
}

.hidden { display: none !important; }