:root { --bg:#0a0f1a; --fg:#e2e8f0; --muted:#94a3b8; }
html,body { height:100%; margin:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans; }
#wrap { position:fixed; inset:0; display:flex; flex-direction:column; }
header { padding: 10px 14px; display:flex; align-items:center; gap:10px; backdrop-filter: blur(8px); background: rgba(15,23,42,0.5); border-bottom:1px solid rgba(255,255,255,0.06); position:relative; z-index:40; }
header .badge { width:10px; height:10px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; }
header input { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--fg); border-radius:10px; padding:8px 10px; outline:none; }
header input::placeholder { color:var(--muted); }
#canvas { flex:1; display:block; width:100vw; height:100%; touch-action:none; }
#hud { position: fixed; bottom: 10px; right: 10px; font-size:12px; color:var(--muted); background: rgba(15,23,42,0.5); border:1px solid rgba(255,255,255,0.08); padding:6px 8px; border-radius:10px; }
#stickArea { position: fixed; left: 16px; bottom: 16px; width: 132px; height: 132px; opacity: .9; }
.ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,0.25); }
.stick { position:absolute; left:50%; top:50%; width:68px; height:68px; margin-left:-34px; margin-top:-34px; border-radius:50%; background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.3); touch-action:none; }
@media (hover:hover) and (pointer:fine) {
  #stickArea { display:none; }
  #fireBtn { display:none; }
}
#fireBtn { position: fixed; right: 16px; bottom: 30px; width: 64px; height: 64px; border-radius: 50%; border:2px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color:#fff; font-weight:700; }
#minimap { position: fixed; right: 12px; top: 58px; width: 160px; height: 120px; border:1px solid rgba(255,255,255,0.15); background: rgba(15,23,42,0.55); border-radius:10px; }
#leader { position: fixed; left: 12px; top: 58px; width: 220px; padding: 8px 10px; border:1px solid rgba(255,255,255,0.15); background: rgba(15,23,42,0.55); border-radius:10px; font-size:12px; color:var(--muted);}
#leader h3 { margin:0 0 6px 0; color:var(--fg); font-size:13px; }
#leader table { width:100%; border-collapse: collapse; }
#leader td { padding:2px 4px; }
#leader td.r { text-align:right; }

/* Settings popover */
.ghost-btn { background: transparent; color: var(--fg); border:1px solid rgba(255,255,255,0.18); padding:6px 10px; border-radius:10px; cursor:pointer; }
.ghost-btn.small { padding:4px 8px; font-size:12px; }
#settingsPanel { position: absolute; top: 46px; right: 14px; width: 280px; background: rgba(15,23,42,0.92); border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); display: none; backdrop-filter: blur(8px); z-index: 50; }
#settingsPanel.open { display: block; }
#settingsPanel .panel-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.08); }
#settingsPanel .panel-body { padding:12px; display:flex; flex-direction:column; gap:12px; }
#settingsPanel .label { font-size:12px; color:var(--muted); }
#settingsPanel .stack { display:flex; flex-direction:column; gap:6px; }
#settingsPanel .row { display:flex; align-items:center; gap:8px; font-size:14px; }
#settingsPanel input[type="text"] { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--fg); border-radius:10px; padding:8px 10px; outline:none; }
#settingsPanel .hint { color:var(--muted); font-size:12px; margin:4px 0 0; }




/* Mobile: prevent double-tap zoom, selection, and callouts */
html, body { touch-action: manipulation; overscroll-behavior: none; }
* { -webkit-tap-highlight-color: transparent; }
#wrap, #canvas, #stickArea, #fireBtn, header, button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Already present but ensure they're there */
#canvas, #stickArea, #fireBtn { touch-action: none; }


/* Prevent focus zoom on iOS: inputs with font-size >=16px won't trigger zoom */
#settingsPanel input[type="text"],
#settingsPanel input[type="search"],
#settingsPanel input[type="email"],
#settingsPanel input[type="url"],
#settingsPanel input[type="tel"],
#settingsPanel input[type="number"],
#settingsPanel input[type="password"] {
  font-size: 16px;
  line-height: 1.3;
}


/* iOS: ensure no-zoom on focus inside settings by keeping 16px on all interactive controls */
#settingsPanel * { font-size: 16px; }
#settingsPanel button { font-size: 16px; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }