:root{
  --bg:#f6f9fb;
  --gutter:#d9e6ef;
  --edge:#9fb6c8;
  --debris:#7a5;
  --paw:#f47b6b;
  --text:#0f2533;
}

html,body{
  height:100%;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#e8f1f6);
  -webkit-tap-highlight-color: transparent;
}

#game{
  width:100vw;
  height:100vh;
  display:block;
  touch-action:none;
}

#hud{
  position: absolute;
  left:10px;
  top:10px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:10;
}

#score{
  background:rgba(255,255,255,0.85);
  padding:8px 10px;
  border-radius:10px;
  color:var(--text);
  font-weight:600;
  box-shadow:0 2px 8px rgba(16,30,40,0.12);
}

#reset{
  padding:8px 10px;
  border-radius:10px;
  border:0;
  background:var(--edge);
  color:white;
  font-weight:600;
  box-shadow:0 2px 8px rgba(16,30,40,0.12);
}

@media (min-width:700px){
  /* keep a comfortable play area on wide displays */
  #game{ max-width:700px; margin: 0 auto; display:block;}
  #hud{ left: calc(50% - 350px + 10px); }
}