:root{
  --bg-start:#0b1023;
  --bg-end:#1b1f3a;
  --accent:#7b7fff;
  --accent-2:#65f7ff;
  --text:#eaf2ff;
  --muted:#a7b0c6;
  --glass-bg:rgba(255,255,255,0.06);
  --glass-stroke:rgba(255,255,255,0.18);
  --success:#59ffa1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins','Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 20% 10%, #1e2450 0%, transparent 40%),radial-gradient(1000px 700px at 80% 90%, #1a2c4d 0%, transparent 40%),linear-gradient(160deg,var(--bg-start),var(--bg-end));
  overflow:hidden;
}

#app{height:100%;display:flex;flex-direction:column}

/* HUD */
.hud{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:18px;z-index:5;
  padding:8px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass-stroke);
}
.hud-item{display:flex;gap:8px;align-items:baseline}
.hud .label{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hud .value{font-size:18px;font-weight:800;color:#fff;min-width:42px;text-align:right}

/* Game Area */
.game-area{position:relative;flex:1;margin-top:64px}
.landing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.landing.hidden{display:none}
.title{font-size:40px;letter-spacing:.4px;margin:0 0 8px 0;text-shadow:0 8px 26px rgba(0,0,0,0.5)}
.subtitle{margin:0 0 22px 0;color:var(--muted)}

/* Game Options */
.game-options{display:flex;gap:20px;margin:0 0 24px 0;justify-content:center;flex-wrap:wrap}
.option-group{display:flex;flex-direction:column;gap:8px;align-items:center;}
.option-label{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.option-select{
  appearance:none;border:none;cursor:pointer;padding:10px 16px;border-radius:10px;
  background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
  border:1px solid var(--glass-stroke);color:var(--text);font-size:14px;font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);backdrop-filter:blur(8px);
  transition:all .25s ease;min-width:140px;text-align:center
}
.option-select:hover{background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.06));border-color:var(--accent-2);box-shadow:0 8px 25px rgba(101,247,255,0.2)}
.option-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,127,255,0.3)}
 
.option-select option{
  background:var(--bg-start);
  color:var(--text);
  font-size:14px;
  font-weight:600;
}

/* Buttons */
.btn-primary,.btn-secondary{
  appearance:none;border:none;cursor:pointer;position:relative;isolation:isolate;
  padding:14px 26px;border-radius:14px;font-weight:700;font-size:16px;color:#0b1023;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 24px rgba(123,127,255,0.45),inset 0 1px 0 rgba(255,255,255,0.35)}
.btn-primary::after{content:"";position:absolute;inset:-4px;border-radius:16px;background:radial-gradient(200px 100px at 50% -20%,rgba(255,255,255,0.35),transparent 60%);opacity:0;transition:opacity .25s}
.btn-primary:hover::after{opacity:1}
.btn-secondary{background:linear-gradient(135deg,#e6f1ff,#a4b9ff);box-shadow:0 10px 24px rgba(90,120,255,0.35)}

/* Circle */
.circle{
  position:absolute;border-radius:50%;
  background:radial-gradient(120px 120px at 35% 35%,rgba(255,255,255,0.9),rgba(255,255,255,0.6) 40%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0.05) 100%),
             radial-gradient(150px 150px at 70% 70%, rgba(123,127,255,0.35), transparent 60%),
             radial-gradient(220px 220px at 30% 80%, rgba(101,247,255,0.35), transparent 60%);
  box-shadow:0 0 25px rgba(123,127,255,0.6), 0 0 60px rgba(101,247,255,0.35);
  transition:transform .2s ease;
}
.circle:active{transform:scale(.98)}
.circle.pop{animation:pop .2s ease forwards}
@keyframes pop{to{opacity:0;transform:scale(1.2)}}

/* +1 popup */
.plus-one{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:800;pointer-events:none;
  text-shadow:0 6px 18px rgba(0,0,0,0.45);animation:rise .6s ease forwards}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%)}}

/* Results Overlay */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,9,20,0.45);backdrop-filter:blur(6px);z-index:10}
.overlay.hidden{display:none}
.results-card{width:min(920px,94vw);max-height:92vh;overflow:auto;background:var(--glass-bg);border:1px solid var(--glass-stroke);border-radius:18px;padding:22px 22px 18px 22px;box-shadow:0 30px 60px rgba(0,0,0,0.45)}
.results-title{text-align:center;margin:6px 0 16px 0;letter-spacing:.3px;font-size:28px;font-weight:800}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.metric{background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));border:1px solid var(--glass-stroke);border-radius:14px;padding:14px;text-align:center}
.metric-label{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.metric-value{font-size:24px;font-weight:800}
.chart-wrap{height:220px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid var(--glass-stroke);border-radius:14px;padding:10px}
.quote{margin:14px 4px 6px 4px;color:#dfe7ff;text-align:center;opacity:.95}
.actions{display:flex;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}

/* Responsive */
@media (max-width:720px){
  .title{font-size:28px}
  .hud{gap:12px;padding:6px 10px}
  .hud .value{font-size:16px}
  .results-grid{grid-template-columns:1fr}
}