:root{--bg:#000;--fg:#fff;--accent:#7c3aed}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px}
.title{font-family:Orbitron,monospace;font-size:28px;margin:6px;color:var(--fg);letter-spacing:2px}
.scoreboard{display:flex;gap:20px;font-size:18px}
.score{background:rgba(255,255,255,0.03);padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.06)}
.game-area{display:flex;justify-content:center;align-items:center;padding:6px;position:relative}
/* spotlight behind the table to simulate lighting */
.game-area::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 18%, rgba(0,0,0,0.0) 60%)}
canvas{background:transparent;border-radius:6px;border:6px solid rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(16,220,120,0.06), 0 8px 30px rgba(0,0,0,0.6);display:block}
.controls{display:flex;gap:12px;align-items:center;margin-top:6px}
.btn{padding:10px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:linear-gradient(90deg,var(--fg),rgba(255,255,255,0.9));color:#000;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,0.06)}
.hint{font-size:13px;opacity:0.85}

/* Overlay */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:80}
.overlay.hidden{display:none}
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);padding:20px;border-radius:12px;text-align:center;color:var(--fg)}
.card h2{margin:0 0 8px;font-size:22px}
.card p{margin:0 0 14px;opacity:0.9}

/* Game visuals */
.midline{stroke:#fff;stroke-width:2;stroke-dasharray:8 8}

/* brighter UI */
.title{color:#e9ffe9;filter:drop-shadow(0 6px 8px rgba(0,255,160,0.08))}
.score{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06)}

@media (max-width:920px){canvas{width:100%;height:auto}}

/* Retro text */
.title{font-weight:700}