:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1512; }
body { font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #e6f2ed; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
canvas { display: block; touch-action: none; }

#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; pointer-events: none;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #7d948c;
}
#right { color: #8fe3c2; }

.pill {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #12211d; color: #8fe3c2; border: 1px solid #24463c;
  border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
}
.pill:active { transform: translateX(-50%) scale(.97); }

.card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(88vw, 340px); background: #12211d; border: 1px solid #24463c;
  border-radius: 20px; padding: 24px 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.card h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.01em; }
.card p { margin: 0 0 18px; color: #a9bdb6; font-size: 14px; }
.row { display: flex; gap: 10px; }
.btn {
  flex: 1; border: 0; border-radius: 12px; padding: 13px 10px;
  background: #2ec498; color: #06120e; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn.ghost { background: #1a2f28; color: #8fe3c2; border: 1px solid #24463c; }
.btn:active { transform: scale(.98); }
.hidden { display: none !important; }