:root{
  --bg:#0d1117;
  --ink:#c9d1d9;
  --accent:#58a6ff;
  --accent-2:#ffb86c;
  --warn:#ff6b6b;
  --ok:#4ade80;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 50% 20%, #0f1623, var(--bg));
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hud{
  width:min(1100px, 95vw);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:8px 10px; margin-top:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06); border-radius:12px;
  backdrop-filter: blur(6px);
}
.hud .left{justify-self:start}
.hud .center{justify-self:center; opacity:.85}
.hud .right{justify-self:end}
.hud .label{opacity:.7; margin-right:6px}

.game-wrap{ position:relative; width:min(1100px, 95vw); aspect-ratio:16/9; background:#0b0f15; border-radius:16px; overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);}
#game{ width:100%; height:100%; display:block; background: linear-gradient(#0b1526, #09101b);}

.overlay{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 300px at 50% 40%, rgba(255,255,255,.06), transparent), linear-gradient(transparent 90%, rgba(0,0,0,.3));}

button{ position:absolute; left:50%; transform:translateX(-50%); bottom:24px; padding:10px 18px; font-weight:700; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)); color:var(--ink); cursor:pointer; transition:.15s transform, .2s opacity }
button.primary{ box-shadow:0 6px 18px rgba(88,166,255,.25); border-color:rgba(88,166,255,.35)}
button.secondary{ bottom:70px; opacity:.9 }
button:hover{ transform:translateX(-50%) scale(1.04) }
.hidden{ display:none }

.footer{ opacity:.8; font-size:14px; padding:8px 0 14px }
.footer .home{ color:var(--accent); text-decoration:none; margin-right:10px }

/* Simple pulse for coin pickup notice */
.pulse{ animation:pulse .8s ease-out }
@keyframes pulse{ from{ filter:drop-shadow(0 0 0 rgba(255,255,255,.3)) } to{ filter:drop-shadow(0 0 14px rgba(255,255,255,.0)) } }
