:root{
  --bg:#70c5ce;
  --ground:#d7b45e;
  --accent:#ffd34d;
  --muted:#7d8792;
  --panel: rgba(255,255,255,0.9);
  --glass: rgba(255,255,255,0.12);
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(to bottom, var(--bg) 0%, #a0e1ea 60%, #c2f0f6 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
.wrap{width:100%;max-width:900px;padding:24px}
.game-ui{position:relative;display:block;margin:0 auto;border-radius:12px;box-shadow:0 10px 40px rgba(10,20,30,0.15)}
canvas{display:block;border-radius:12px;background:linear-gradient(#80d8e8,#bfeef4);}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.panel{background:var(--panel);padding:28px;border-radius:12px;text-align:center;backdrop-filter: blur(6px);box-shadow:0 6px 24px rgba(8,20,30,0.08)}
.btn{appearance:none;border:0;background:linear-gradient(180deg,var(--accent),#ffb84d);padding:10px 18px;border-radius:8px;color:#222;font-weight:700;cursor:pointer;margin-top:12px}
.small{font-size:13px;margin-top:8px}
.muted{color:var(--muted)}
.hud{position:absolute;left:18px;top:18px}
.score{font-weight:800;font-size:36px;color:white;text-shadow:0 2px 6px rgba(10,10,10,0.4)}
.footer{margin-top:14px;text-align:center;color:rgba(20,30,40,0.6);font-size:13px}
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* responsive */
@media (max-width:820px){
  .wrap{padding:12px}
  canvas{width:100%;height:auto}
}