@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&family=JetBrains+Mono:wght@700&display=swap');

:root {
  --bg-1:#06020f; --bg-2:#0c0618;
  --gold:#fbbf24; --gold-glow:#f59e0b;
  --basket:#22d3ee; --basket-glow:#06b6d4;
  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.4);
  --surface:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --font-display:'Outfit',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--bg-1);font-family:var(--font-display);
  color:var(--text-primary);touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}

#gameCanvas{display:none;position:absolute;top:0;left:0;width:100%;height:100%}

.screen{
  display:none;position:absolute;top:0;left:0;width:100%;height:100%;
  flex-direction:column;align-items:center;justify-content:center;
  z-index:10;padding:24px;
}
.screen.active{display:flex}

.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient::before{
  content:'';position:absolute;width:500px;height:500px;top:-150px;left:-100px;
  background:radial-gradient(circle,rgba(168,85,247,0.10) 0%,transparent 70%);
  animation:drift 20s ease-in-out infinite alternate;
}
.ambient::after{
  content:'';position:absolute;width:400px;height:400px;bottom:-100px;right:-80px;
  background:radial-gradient(circle,rgba(34,211,238,0.06) 0%,transparent 70%);
  animation:drift 16s ease-in-out infinite alternate-reverse;
}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,40px) scale(1.3)}}

.stars{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 15% 25%,rgba(255,255,255,0.3),transparent),
    radial-gradient(1px 1px at 45% 15%,rgba(255,255,255,0.2),transparent),
    radial-gradient(1px 1px at 75% 45%,rgba(255,255,255,0.25),transparent),
    radial-gradient(1px 1px at 25% 65%,rgba(255,255,255,0.15),transparent),
    radial-gradient(1.5px 1.5px at 35% 40%,rgba(255,255,255,0.35),transparent),
    radial-gradient(1px 1px at 90% 20%,rgba(255,255,255,0.3),transparent);
}

.title-wrap{text-align:center;position:relative;z-index:1}
.title{
  font-size:clamp(48px,14vw,80px);font-weight:900;
  letter-spacing:-1px;line-height:1;margin-bottom:6px;
}
.title span{
  background:linear-gradient(135deg,#ff6b35,#ff2d78,#a855f7,#22d3ee);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:gradShift 6s ease infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.tagline{
  font-size:clamp(13px,3.5vw,17px);font-weight:600;
  letter-spacing:5px;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:48px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 48px;border:1px solid var(--border);border-radius:60px;
  background:var(--surface);backdrop-filter:blur(16px);
  color:var(--text-primary);font-family:var(--font-display);
  font-size:clamp(14px,3.5vw,17px);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1);min-width:200px;
}
.btn:active{
  transform:scale(.96);background:rgba(255,255,255,.08);
  border-color:#22d3ee;box-shadow:0 0 40px rgba(34,211,238,.15);
}
.btn-glow{border-color:rgba(34,211,238,.3);box-shadow:0 0 30px rgba(34,211,238,.08)}

.instructions{margin-top:40px;text-align:center;max-width:300px}
.instructions p{font-size:clamp(12px,3vw,14px);line-height:1.7;color:var(--text-secondary)}
.instructions strong{color:var(--gold);font-weight:700}

.results-box{text-align:center;max-width:340px;width:100%;position:relative;z-index:1}
.result-title{font-size:clamp(24px,7vw,40px);font-weight:900;margin-bottom:6px}
.result-score-big{
  font-family:var(--font-mono);
  font-size:clamp(56px,16vw,90px);font-weight:700;line-height:1;margin-bottom:4px;
}
.result-subtitle{font-size:clamp(14px,3.5vw,18px);color:var(--text-secondary);margin-bottom:28px}
.stats-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--border);border-radius:16px;overflow:hidden;margin-bottom:28px;
}
.stat-cell{background:var(--bg-2);padding:14px 12px;text-align:center}
.stat-cell .stat-value{
  font-family:var(--font-mono);font-size:clamp(18px,5vw,24px);
  font-weight:700;line-height:1;margin-bottom:4px;
}
.stat-cell .stat-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary)}
.result-buttons{display:flex;gap:10px;justify-content:center}
.result-buttons .btn{min-width:140px;padding:14px 28px}

#hud{
  display:none;position:absolute;top:0;left:0;right:0;
  padding:10px 16px;z-index:20;pointer-events:none;font-variant-numeric:tabular-nums;
}
#hud.active{display:flex;justify-content:space-between;align-items:flex-start}
.hud-score{font-family:var(--font-mono);font-size:clamp(22px,6vw,32px);font-weight:700}
.hud-sub{font-size:clamp(10px,2.5vw,12px);color:var(--text-secondary);margin-top:2px}
.hud-caught{font-family:var(--font-mono);font-size:clamp(28px,8vw,42px);font-weight:700;line-height:1;text-align:right}
.hud-caught-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text-secondary);text-align:right}

#progressBar{display:none;position:absolute;bottom:0;left:0;right:0;height:3px;z-index:20;background:var(--surface)}
#progressBar.active{display:block}
#progressFill{height:100%;width:0%;background:linear-gradient(90deg,#a855f7,#22d3ee);transition:width .3s ease}