html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #05060e;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
  cursor: crosshair;
  touch-action: none;                 /* the game owns all touch gestures */
  -webkit-tap-highlight-color: transparent;
}
#c { display: block; width: 100vw; height: 100vh; touch-action: none; }
#mute {
  position: fixed; top: 14px; right: 16px; z-index: 10;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #9fd8ff; font-size: 13px; letter-spacing: .12em;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
#mute:hover { background: rgba(255,255,255,.12); }
#infoBtn, #profileBtn {
  position: fixed; top: 14px; z-index: 10;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #9fd8ff; font-size: 13px; letter-spacing: .12em;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
#infoBtn { right: 132px; }
#profileBtn { right: 236px; }
#infoBtn:hover, #profileBtn:hover { background: rgba(255,255,255,.12); }
#info, #profile {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,12,.8); backdrop-filter: blur(3px);
  cursor: default;
}
#info.hidden, #profile.hidden { display: none; }
#info .panel, #profile .panel {
  width: min(640px, 88vw); max-height: 84vh; overflow-y: auto;
  background: #0b0e22; border: 1px solid rgba(159,216,255,.25);
  border-radius: 14px; padding: 28px 32px;
  color: #c7d3f0; font-size: 14px; line-height: 1.55;
}
#info h1, #profile h1 { margin: 0 0 2px; color: #eafff5; font-size: 26px; letter-spacing: .2em; }
#info .tag, #profile .tag { color: #9fd8ff; margin: 0 0 18px; font-weight: 600; }
#info h2, #profile h2 { color: #7dffc8; font-size: 14px; letter-spacing: .18em; margin: 20px 0 8px; }
#info .combo { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #ffd76a;
               background: rgba(255,255,255,.04); border-radius: 0 8px 8px 0; }
#info .combo b { color: #ffd76a; letter-spacing: .08em; }
#info .reward { color: #7dffc8; }
#info .keys span { display: inline-block; background: rgba(255,255,255,.08);
                   border: 1px solid rgba(255,255,255,.18); border-radius: 5px;
                   padding: 1px 8px; margin-right: 6px; font-weight: 600; color: #eafff5; }
#info .close, #profile .close { margin-top: 18px; color: #5a6a9a; font-size: 12px; }
#profile .statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#profile .stat { background: rgba(255,255,255,.04); border-radius: 10px; padding: 12px 8px; text-align: center; }
#profile .stat .v { color: #eafff5; font-size: 22px; font-weight: 700; }
#profile .stat .k { color: #5a6a9a; font-size: 10px; letter-spacing: .14em; margin-top: 2px; }
#profile .ach { margin: 0 0 10px; padding: 9px 14px; border-left: 3px solid #ffd76a;
                background: rgba(255,255,255,.04); border-radius: 0 8px 8px 0; }
#profile .ach b { color: #ffd76a; letter-spacing: .06em; }
#profile .ach.locked { opacity: .38; border-left-color: #3a4568; }
#profile .ach.locked b { color: #8a97c0; }
#profile .ach .date { color: #5a6a9a; font-size: 12px; }
#ver {
  position: fixed; bottom: 10px; right: 14px; z-index: 10;
  color: #3a4568; font-size: 11px; letter-spacing: .08em;
  pointer-events: none;
}