* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:#07090f; color:#eaf2ff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; touch-action:none; user-select:none; }

#cam { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); opacity:.35; }
#game { position:fixed; inset:0; display:block; }

.overlay { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:18px; padding:26px; overflow:auto;
  background:radial-gradient(circle at 50% 28%, #16233f 0%, #06070c 72%); }
.hidden { display:none !important; }
h1 { font-size:clamp(32px,7vw,62px); font-weight:800; letter-spacing:1px; }
.accent { color:#38e1b0; }
.warn { color:#ffd166; }
p.sub { font-size:clamp(14px,3.3vw,19px); opacity:.82; max-width:660px; line-height:1.55; }
p.small { font-size:13px; opacity:.6; max-width:600px; line-height:1.55; }
.btn { font-size:clamp(17px,4vw,22px); font-weight:700; padding:15px 32px; border:none; border-radius:14px;
  cursor:pointer; background:#38e1b0; color:#052018; }
.btn.sec { background:#243049; color:#dfe9ff; }
.btn:disabled { opacity:.6; }
.btn:active { transform:scale(.97); }
.row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.how { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; max-width:620px; width:100%; }
.how div { background:#141c2e; border:1px solid #273350; border-radius:12px; padding:10px 12px; font-size:14px; text-align:left; }
.how b { color:#9fe8ff; }
.seg { display:flex; background:#141c2e; border:1px solid #273350; border-radius:12px; overflow:hidden; }
.seg button { background:none; border:none; color:#cfe0ff; padding:10px 16px; font-size:15px; cursor:pointer; }
.seg button.on { background:#38e1b0; color:#052018; font-weight:700; }
.err { color:#ff8e8e; font-size:14px; max-width:540px; line-height:1.5; }
a.back { position:fixed; top:14px; left:14px; z-index:30; color:#cfe0ff; text-decoration:none; font-size:14px;
  background:rgba(4,8,14,.55); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:6px 12px; }

#hud { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; justify-content:center; gap:10px;
  padding:14px 18px; pointer-events:none; }
.pill { background:rgba(4,8,14,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:6px 14px; min-width:84px; text-align:center; font-variant-numeric:tabular-nums; }
.pill .label { font-size:10px; opacity:.6; letter-spacing:1px; text-transform:uppercase; }
.pill .val { font-size:clamp(18px,4.4vw,28px); font-weight:800; color:#38e1b0; }

#calib { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:15; text-align:center;
  background:rgba(4,8,14,.7); border-radius:18px; padding:20px 28px; }
#calib .big { font-size:clamp(24px,6vw,44px); font-weight:800; }
#calib .bar { margin-top:12px; height:10px; width:min(60vw,360px); border-radius:6px; background:rgba(255,255,255,.15); overflow:hidden; }
#calib .bar i { display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:#38e1b0; }
#bodyWarn { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:15;
  background:rgba(60,20,20,.75); border-radius:12px; padding:8px 16px; font-size:15px; }