:root { --cyan:#46f3ff; --bg:#04070d; --panel:rgba(4,10,18,.78); }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; background:var(--bg); color:#eaf7ff;
  font-family:-apple-system,Roboto,'Segoe UI',sans-serif; }

.overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center;
  justify-content:center; padding:20px;
  background:radial-gradient(circle at 50% 30%, #0a1626 0%, #04070d 70%); }
.card { max-width:420px; width:100%; text-align:center; padding:32px 24px;
  border:1px solid rgba(70,243,255,.35); border-radius:20px; background:var(--panel);
  box-shadow:0 0 40px rgba(70,243,255,.15); }
.badge { display:inline-block; font-size:11px; letter-spacing:2px; color:var(--cyan);
  border:1px solid rgba(70,243,255,.4); border-radius:999px; padding:6px 12px; margin-bottom:16px; }
h1 { font-size:30px; margin-bottom:4px; }
.sub { color:var(--cyan); font-size:14px; letter-spacing:1px; margin-bottom:14px; }
.desc { font-size:14px; line-height:1.5; color:#bcd6e4; margin-bottom:22px; }
.note { font-size:11px; color:#7d93a3; margin-top:14px; }

.btn { border:none; border-radius:14px; cursor:pointer; font-size:16px; font-weight:600;
  padding:14px 22px; transition:transform .15s; }
.btn:active { transform:scale(.96); }
.btn-primary { background:linear-gradient(135deg,#46f3ff,#1e9df2); color:#032030;
  box-shadow:0 0 24px rgba(70,243,255,.45); }
.btn-icon { background:var(--panel); border:1px solid rgba(70,243,255,.4); font-size:20px; padding:12px 16px; }

#hud { position:fixed; inset:0; z-index:40; pointer-events:none; display:flex;
  flex-direction:column; justify-content:space-between; align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
.hud-panel { background:var(--panel); border:1px solid rgba(70,243,255,.35); border-radius:14px;
  padding:10px 16px; font-size:14px; backdrop-filter:blur(6px); text-align:center; max-width:90%; }
#hud-buttons { display:flex; gap:12px; pointer-events:auto; }