* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #bcd9f0; }
canvas { display: block; }

#ui {
  position: fixed; top: 14px; left: 14px; z-index: 10;
  display: flex; gap: 8px; align-items: center;
  font-family: -apple-system, system-ui, Arial, sans-serif;
}
#ui button {
  border: 0; border-radius: 10px; padding: 10px 14px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  background: rgba(20, 35, 63, 0.82); color: #fff;
  backdrop-filter: blur(6px); box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
#ui button:hover { background: rgba(20, 35, 63, 0.95); }
#label {
  font-family: -apple-system, system-ui, Arial, sans-serif;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .5px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(226, 59, 46, 0.9); box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
#hud {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: none; text-align: center; color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(20, 35, 63, 0.82); backdrop-filter: blur(6px);
  border-radius: 12px; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,.25); line-height: 1.2;
}
#hud.on { display: block; }
#hud .big { font-size: 28px; font-weight: 800; letter-spacing: 1px; }
#hud .sub { font-size: 12px; opacity: .9; letter-spacing: .5px; }
#hud .sub b { color: #ffd23d; }
#ui button:disabled { opacity: .5; cursor: default; }
#hint {
  position: fixed; bottom: 12px; left: 0; right: 0; z-index: 10; text-align: center;
  font-family: -apple-system, system-ui, Arial, sans-serif; font-size: 12px;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.4);
  pointer-events: none;
}