:root {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --glass: rgba(10, 14, 22, 0.55);
  --text: #f8fafc;
  --muted: #b6c2d2;
  --accent: #84cc16;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #05070b; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; }
#camera { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; background: radial-gradient(circle at center, #1f2937, #030712); }
#camera::after { content: ''; }
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05), rgba(0,0,0,.45)); pointer-events: none; z-index: 1; }
.glass { background: var(--glass); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.topbar { position: fixed; z-index: 5; top: calc(14px + var(--safe-top)); left: 14px; right: 14px; padding: 14px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
#status { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
button { border: 0; color: #06120b; background: var(--accent); font-weight: 800; border-radius: 999px; padding: 10px 15px; cursor: pointer; }
.reticle { position: fixed; z-index: 2; inset: 0; pointer-events: none; }
.line { position: absolute; background: rgba(255,255,255,.35); }
.line.h { left: 34vw; right: 34vw; top: 50%; height: 1px; }
.line.v { top: 40vh; bottom: 40vh; left: 50%; width: 1px; }
.dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; transform: translate(-50%, -50%); }
.event-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.event-card { position: absolute; width: min(78vw, 330px); transform: translate(-50%, -50%); padding: 14px; border-radius: 20px; background: rgba(8, 12, 20, .68); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(15px); box-shadow: 0 22px 60px rgba(0,0,0,.35); transition: left .12s linear, top .12s linear, opacity .16s ease; }
.event-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 800; }
.event-card h2 { font-size: 17px; line-height: 1.2; margin: 8px 0 8px; }
.event-card p { font-size: 13px; margin: 0; color: var(--muted); line-height: 1.35; }
.event-card .stats { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: #dbeafe; }
.radar-strip { position: fixed; z-index: 3; left: 12px; right: 12px; top: calc(112px + var(--safe-top)); height: 46px; border-radius: 999px; background: rgba(2,6,23,.42); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); overflow: hidden; }
.radar-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 18px var(--accent); }
.radar-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.55); }
.compassPanel { position: fixed; z-index: 5; left: 14px; right: 14px; bottom: calc(120px + var(--safe-bottom)); padding: 14px; border-radius: 20px; }
.row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin: 4px 0; }
.row strong { color: var(--text); text-align: right; }
.bottomSheet { position: fixed; z-index: 5; left: 14px; right: 14px; bottom: calc(14px + var(--safe-bottom)); border-radius: 22px; padding: 12px; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.35; margin-bottom: 10px; }
.filters { display: flex; gap: 8px; overflow-x: auto; }
.chip { background: rgba(255,255,255,.12); color: var(--text); border: 1px solid rgba(255,255,255,.12); padding: 8px 12px; flex: 0 0 auto; }
.chip.active { background: var(--accent); color: #06120b; }
@media (min-width: 768px) {
  .topbar, .bottomSheet, .compassPanel { max-width: 520px; left: 50%; right: auto; width: calc(100vw - 28px); transform: translateX(-50%); }
}