:root{
  --bg:#0b0b0b;--fg:#f2f2f2;--muted:#9aa0a6;--accent:#36d399;--danger:#ef4444;--card:#141414;--border:#222;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
.container{min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.6);backdrop-filter:saturate(130%) blur(6px);position:sticky;top:0;z-index:3}
.brand{font-weight:800;letter-spacing:.4px}
.score{display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#121212;font-weight:700}
.badge.win{border-color:#2fb07f;color:#36d399}
.badge.active{border-color:#2fb07f;color:#36d399}
.vs{color:var(--muted);font-weight:700}
.screen{padding:16px;display:none}
.screen.active{display:block}
.hidden{display:none}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.row{display:flex;gap:12px;align-items:center}
select{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#121212;color:var(--fg)}
.col{display:flex;flex-direction:column;gap:12px}
button, input, select{font:inherit}
button{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#1b1b1b;color:var(--fg);font-weight:600}
button.primary{background:var(--accent);color:#081a12;border-color:#2fb07f}
button.ghost{background:transparent}
button.danger{background:var(--danger);border-color:#b91c1c}
input{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#121212;color:var(--fg)}
label{font-size:12px;color:var(--muted)}
.hint{color:var(--muted);font-size:12px}
.spacer{height:12px}
.video-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#000}
video, canvas{width:100%;height:auto;display:block}
.overlay{position:absolute;inset:0;pointer-events:none}
.overlay.interactive{pointer-events:auto}
.box{position:absolute;border:3px solid var(--accent);border-radius:10px;box-shadow:0 0 0 2px rgba(54,211,153,0.2)}
.box label{position:absolute;left:6px;top:6px;background:linear-gradient(180deg,#36d399,#28b17f);color:#02170f;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:900;cursor:pointer;text-decoration:underline;text-transform:uppercase}
.box .hitarea{position:absolute;inset:0}
.box{cursor:pointer}
.box:hover{outline:2px solid rgba(54,211,153,0.6)}
.footer-actions{position:sticky;bottom:0;background:linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,1) 32%);padding:16px 16px 24px;display:flex;gap:12px}
.timer{font-variant-numeric:tabular-nums;font-weight:800}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;margin-top:10vh}
.pill{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:12px}
.name{font-weight:700}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.notice{background:#1b1b1b;border:1px solid var(--border);padding:12px 14px;border-radius:10px}

/* Success feedback */
.feedback{position:fixed;left:50%;top:35%;transform:translate(-50%,-50%) scale(0.6);background:radial-gradient( circle at 30% 30%, #fffb, #0000), #1b1b1b;color:#fff;border:2px solid #2fb07f;border-radius:16px;padding:12px 16px;font-size:48px;line-height:1;display:flex;gap:10px;align-items:center;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:9999;animation:pop 3s ease-out forwards}
.feedback .plus{font-weight:900;color:#36d399;text-shadow:0 2px 0 #0a3}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-70%,-70%) scale(.98)}}

/* Geolocation specific styles */
.location-info{background:#1b1b1b;border:1px solid var(--border);padding:12px 14px;border-radius:10px;margin:12px 0}
.distance{font-size:18px;font-weight:800;color:var(--accent)}
.distance.far{color:var(--danger)}
.distance.close{color:#ffd700}
.distance.very-close{color:#36d399}
.map-container{width:100%;height:200px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#000}
.progress-bar{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden;margin:8px 0}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--danger),#ffd700,var(--accent));transition:width 0.3s ease}

@media (min-width:720px){
  .container{max-width:680px;margin:0 auto}
}