:root{
  --blue:#0ea5e9;           /* sky blue */
  --blue-dark:#0369a1;      /* darker accents */
  --orange:#f97316;         /* pipes & accents */
  --orange-dark:#c2410c;
  --white:#ffffff;
}
html,body{
  margin:0; height:100%; background:var(--blue-dark);
  font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--white); -webkit-tap-highlight-color: transparent;
}
.wrap{ display:grid; place-items:center; height:100%; padding:16px; box-sizing:border-box; }
canvas{ background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 60%, #0891b2 100%);
  border:8px solid var(--orange);
  border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  touch-action:manipulation; max-width:100%; height:auto; }
.hud{ position:fixed; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(3,105,161,.85); border:2px solid var(--orange); border-radius:999px; padding:.4rem .9rem; display:flex; gap:.8rem; align-items:center; font-weight:700; }
.badge{ background:var(--orange); color:#111827; padding:.1rem .5rem; border-radius:6px; font-weight:800; }
.hint{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-size:.95rem; opacity:.9; text-align:center; }
.link{ color:var(--orange); text-decoration:none; font-weight:700; }