:root { --bg:#0e0f12; --panel:#181a20; --line:#2a2d36; --text:#e6e6e6; --dim:#8a8f9c; --accent:#d8a24a; --red:#d84a4a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"Apple SD Gothic Neo",sans-serif; padding:24px 16px; }
.wrap { display:flex; flex-direction:column; align-items:center; gap:18px; }
.phone { position:relative; width:800px; max-width:100%; aspect-ratio:20/9; background:#000; border-radius:28px; border:6px solid #2c2f38; overflow:hidden; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none; }
.phone canvas { position:absolute; inset:0; }
.hud { position:absolute; inset:0; pointer-events:none; font-size:11px; font-weight:600; letter-spacing:.3px; text-shadow:0 1px 2px #000; }
.hud .tl { position:absolute; left:max(16px, env(safe-area-inset-left)); top:10px; width:150px; }
.hud .row { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.hud .row svg { width:12px; height:12px; flex:none; }
.hud .bar { flex:1; height:6px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.hud .bar i { display:block; height:100%; width:100%; }
.hud .bar.hp i { background:#6fcf6f; } .hud .bar.ar i { background:#6fa8d6; } .hud .bar.st i { background:#d8c24a; }
.hud .bar i.low { background:var(--red); }
.hud .row .v { width:26px; text-align:right; font-size:10px; color:var(--dim); }
.hud .posture { color:var(--dim); font-weight:400; font-size:10px; }
.hud .tc { position:absolute; left:0; right:0; top:30px; text-align:center; color:var(--accent); font-size:12px; }
.hud .tr { position:absolute; right:max(16px, env(safe-area-inset-right)); top:10px; text-align:right; }
.hud .ammo { display:flex; align-items:baseline; justify-content:flex-end; gap:4px; }
.hud .ammo b { font-size:26px; line-height:1; font-weight:700; }
.hud .ammo b.low { color:var(--red); animation:blink .5s infinite alternate; }
.hud .ammo span { color:var(--dim); font-size:12px; }
.hud .ammo svg { width:14px; height:18px; margin-left:4px; align-self:center; }
.hud .kills { color:var(--dim); font-size:10px; margin-top:2px; }
@keyframes blink { to { opacity:.35; } }
.hud .center { position:absolute; left:0; right:0; top:40%; text-align:center; color:var(--accent); font-size:13px; }
.hud .feed { position:absolute; right:max(16px, env(safe-area-inset-right)); top:64px; text-align:right; color:var(--dim); font-size:10px; font-weight:400; line-height:1.5; }
.hud .feed b { color:var(--text); font-weight:600; }
.hud .hint { position:absolute; left:0; right:0; bottom:8px; text-align:center; color:var(--dim); font-weight:400; }
.stick { position:absolute; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); pointer-events:none; z-index:1; }
.stick::before { content:''; position:absolute; inset:2px; border-radius:50%; background:repeating-conic-gradient(from -1deg, rgba(255,255,255,.3) 0 2deg, transparent 2deg 30deg); -webkit-mask:radial-gradient(circle, transparent 66px, #000 67px); mask:radial-gradient(circle, transparent 66px, #000 67px); }
.stick.move { left:max(30px, env(safe-area-inset-left)); bottom:30px; }
.stick.aim { right:max(30px, env(safe-area-inset-right)); bottom:30px; border-color:rgba(216,162,74,.45); }
.stick.active { background:rgba(255,255,255,.09); }
.stick .knob { position:absolute; left:51px; top:51px; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.5); }
.stick.aim .knob { background:rgba(216,162,74,.65); }
.stick.aim::after { content:''; position:absolute; inset:14px; border-radius:50%; border:1px dashed rgba(216,162,74,.35); }
.stick.aim.firing { border-color:#e05a3a; box-shadow:0 0 18px rgba(224,90,58,.55), inset 0 0 18px rgba(224,90,58,.25); }
.stick.aim.firing .knob { background:#e06a3a; box-shadow:0 0 12px rgba(224,106,58,.8); }
.btn { position:absolute; width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; font-size:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; user-select:none; -webkit-user-select:none; touch-action:none; cursor:pointer; z-index:2; }
.btn svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn.bag { left:max(16px, env(safe-area-inset-left)); top:78px; width:40px; height:40px; }
.btn.sprint { right:calc(max(30px, env(safe-area-inset-right)) + 166px); bottom:60px; }
.btn.sneak { right:calc(max(30px, env(safe-area-inset-right)) + 152px); bottom:139px; }
.btn.crouch { right:calc(max(30px, env(safe-area-inset-right)) + 176px); bottom:4px; width:42px; height:42px; }
.btn.reload { right:calc(max(30px, env(safe-area-inset-right)) + 100px); bottom:187px; }
.btn.loot { right:calc(max(30px, env(safe-area-inset-right)) + 30px); bottom:196px; }
.btn.mute { width:34px; height:34px; font-size:9px; right:calc(max(16px, env(safe-area-inset-right)) + 120px); top:12px; gap:0; }
.btn.mute svg { width:14px; height:14px; }
.btn.on { background:rgba(216,162,74,.35); border-color:var(--accent); }
.btn.disabled { opacity:.35; }
.overlay { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(8,9,12,.78); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.overlay[hidden] { display:none; }
.overlay .ov-title { font-size:22px; font-weight:700; letter-spacing:1px; color:var(--accent); text-shadow:0 2px 6px #000; }
.overlay .ov-title.bad { color:var(--red); } .overlay .ov-title.good { color:#7ad37a; }
.overlay .ov-body { font-size:12px; color:var(--dim); text-align:center; line-height:1.7; min-height:1.7em; }
.overlay .ov-body b { color:var(--text); font-weight:600; }
.overlay .ov-btn { margin-top:8px; padding:12px 34px; border-radius:24px; border:1px solid var(--accent); background:rgba(216,162,74,.18); color:var(--text); font-size:14px; font-weight:600; cursor:pointer; }
.overlay .ov-btn:active { background:rgba(216,162,74,.4); }
.overlay .field { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--dim); width:220px; }
.overlay .field input { font:inherit; font-size:15px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); text-transform:uppercase; }
.overlay .field input#lobbyName { text-transform:none; }
.rotate { display:none; position:fixed; inset:0; z-index:9; background:var(--bg); color:var(--dim); align-items:center; justify-content:center; font-size:15px; }
@media (pointer:coarse) and (max-width:1100px) {
  body { padding:0; overflow:hidden; position:fixed; inset:0; }
  .wrap { gap:0; }
  .phone { position:fixed; inset:0; width:100vw; max-width:none; aspect-ratio:auto; height:100vh; height:100dvh; border:0; border-radius:0; }
  .rotate { display:flex; }
}
@media (orientation:landscape) { .rotate { display:none !important; } }